最简单的调用:
- $(function (){
- $('#box').draggable({
- });
- });
复制代码
属性
Proxy null/string/function 当使用clone,则克隆一个代替元素拖动,如果指定一个函数,则自定义替代元素
Revert false/boolean 设置为true则停止时返回起始位置
cursor move/string 拖动时的鼠标css样式
deltaX null/number 被拖动的元素相对于当前元素的光标位置x
deltaY null/number 被拖动的元素相对于当前元素的光标位置y
handle null/selector 开始拖动的句柄
disabled false/boolean 设置为true,则禁止拖动
edge 0/number 可拖动部分距离整个边缘的宽度
axis null/string 设置拖动的方向:v->垂直 h->水平
事件
onBeforeDrag e 开始之前触发,返回false将取消拖动
onStartDrag e 拖动开始时触发
onDrag e 拖动过程中触发,直到不能拖动时返回false
onStopDrag e 拖动停止时触发
方法
options none 返回属性对象
proxy none 如果代理属性被设置则返回该拖动代理元素
enable none 使得允许拖动
disable none 使得禁止拖动
以上所有属性、事件、方法的用法:
- <script type="text/javascript">
- $(function (){
- $('#box').draggable({
- revert:true,
- cursor:'text',
- handle:null,
- disabled:false,
- edge:0,
- axis:null,
- onBeforeDrag:function (e){
- // alert('beforeDrag');
- },
- onStartDrag:function (e){
- // console.log(e);
- },
- onDrag:function (e){
- // console.log(e);
- },
- onStopDrag:function (e){
- // alert('stop');
- }
- });
- $('#box').draggable('disable')
- console.log( $('#box').draggable('options') );
- });
- </script>
复制代码
|
|