EasyUI拖动组件实现拖拽效果

EasyUI是一个包的jqusey UI插件,但它仍然是非常好用的,至少,我喜欢这个渣用了很多时间。

有两种方式加载可拖动:

1,通过类加载,如下所示:







通过js加载,如下所示:


$(#盒)Draggable();



两点要注意的是whether'easyui-draggable'or拖动固定。他们称,EasyUI写了功能实现效果的jQuery。

Draggable的特性:

当返回等价为true时,拖动返回到起始位置,并可拖动到周围。

返回:布尔,

轴极限阻力,方向level'h 'vertical'v '这是一个有趣的组合的回复,并拖动方向设置。

垂直的话是一样的微信、微博。

轴:字符串 / / H V,

代理克隆是拖动对象,同时拖动,然后复制鼠标拖动鼠标,当然,

可以是其他的,可以触发功能。

代理:空/字符串/函数,

然后还有很多其他的属性,并不觉得特别有趣。

游标:当指定的指针样式成为美国和美国时,移动/字符串,拖动。

Δx:空/数量,

deltay:空/数/ /拖动元素对应于当前光标位置的x,y是一个拖动元素和光标距离

句柄:空/选择器/句柄来处理拖动!只能用手柄拖动!对!

禁用:布尔值/真设置为第一个绑定元素,不能拖动

边缘:在其中,可以从容器下面拖动容器的宽度,就像在矩形内的矩形,然后只能在矩形元素内部的鼠标内部拖动。



实例uff1a


$(#盒({ Draggable)。
回复:真的,
光标:中,
手柄:#痘,
残疾人:假,
优势:50,
轴:V,
代理:'clone,
Δx:10,
deltay:10,
代理:函数(源){
console.log(哈!);
}
});




拖动事件:

onbeforedrag触发前拖,并返回错误将取消拖动


OnBeforeDrag:功能(e){
警报('trigger前拖);
返回false;
}



onstartdrag拖动触发


OnStartDrag:功能(e){
警报('trigger '当'拖');
}




阻力将被触发,并没有拖回假


OnDrag:功能(e){
警报('trigger过程触发的);
}



当拖动阻力触发停止


OnStopDrag:功能(e){
警报('triggering当拖动停止);
}



可拖动的方法清单

选项返回属性对象


console.log($(' #盒)。Draggable(选项));




代理设置代理属性时返回代理代理元素。


console.log($(' #箱),Draggable('proxy '));




可以拖动


$(#箱),Draggable('enable);




禁止禁止拖拉




$(#箱),Draggable('disable);



让我们看一个简单的例子。







基本可拖动- jQuery EasyUI演示








基本可拖动
通过点击鼠标移动下面的方框。

容器中的内容


$(函数(){())

$(#标题)。Draggable({
代理:函数(a){
var a = $(你帮我);
A.appendTo('body);
返回一个;
},
光标:'pointer,
优势:6
});
});






以上是关于EasyUI 1.2.5拖动所有的属性、事件、方法和实例,如果出了什么问题,欢迎评论,讨论和评论。