一、创建拖动组件
0.Draggable组件不依赖于其他组件
1.使用标签创建
<div class="easyui-draggable" id="box" style="width: 200px; height: 100px; left: 100px; background: orange">拖动组件</div>
2.使用js创建
<div id="box" style="width: 200px; height: 100px; left: 100px; background: orange">拖动组件</div>
<script>
$(function () {
$("#box").draggable();
});
</script>
二、属性
1.revert:如果设置为true,在拖动停止时元素将返回起始位置
<script>
$(function () {
$("#box").draggable({
revert:true
});
});
</script>
2.cursor:拖动时的CSS指针样式
$(function () {
$("#box").draggable({
cursor: "text"
});
});
3.handle:开始拖动的句柄
<div id="box" style="width: 200px; height: 100px; left: 100px; background: orange">
<div id="pox">拖动组件</div>
</div>
<script>
$(function () {
$("#box").draggable({
handle: "#pox"
});
});
</script>
4.disabled:如果设置为true,则停止拖动
<script>
$(function () {
$("#box").draggable({
disabled: true
});
});
</script>
5.edge:可以在其中拖动的容器的宽度(理解成padding<=20时无法拖)
<script>
$(function () {
$("#box").draggable({
edge: 20
});
});
</script>
6.axis:定义元素移动的轴向,可用值有:’v’或’h’,当没有设置或设置为null时可同时在水平和垂直方向上拖动
<script>
$(function () {
$("#box").draggable({
axis: 'h'
});
});
</script>
7.proxy:在拖动的时候使用的代理元素,当使用’clone’的时候,将使用该元素的一个复制元素来作为替代元素
<script>
$(function () {
$("#box").draggable({
proxy: "clone",
deltaX: 50,
deltaY: 50
});
});
</script>
三、事件
1.onBeforeDrag:在拖动之前触发,返回false将取消拖动
<script>
$(function () {
$("#box").draggable({
onBeforeDrag: function (e) {
alert("拖动前触发");
//return false;
}
});
});
</script>
2.onStartDrag:在目标对象开始被拖动时触发
<script>
$(function () {
$("#box").draggable({
onStartDrag: function (e) {
alert("拖动开始触发");
}
});
});
</script>
3.onDrag:在拖动过程中触发,当不能再拖动时返回false
<script>
$(function () {
$("#box").draggable({
onDrag: function () {
alert("拖动过程触发");
}
});
});
</script>
4.onStopDrag:在拖动停止时触发
<script>
$(function () {
$("#box").draggable({
onStopDrag: function () {
alert("拖动结束触发");
}
});
});
</script>
四、方法
1.disable:禁止拖动
<script>
$(function () {
$("#box").draggable({ });
$("#box").draggable("disable");
});
</script>
2.enable:允许拖动
<script>
$(function () {
$("#box").draggable({ });
$("#box").draggable("enable");
});
</script>
3.options:返回属性对象
<script>
$(function () {
$("#box").draggable({ });
console.log($("#box").draggable("options"));
});
</script>
4.proxy:如果代理属性被设置则返回该拖动代理元素
<script>
$(function () {
$("#box").draggable({
proxy: function (source) {
//source是id为box的div对象
//console.log(source);
var p = $("<div style='width:400px;height:200px;border:1px dashed red'></div>");
//p.appendTo("body");
p.html($(source).html()).appendTo("body");
return p;
}
});
});
</script>
五、重写默认值对象
<script>
$(function () {
//所有该组件,都是文本指针
$.fn.draggable.defaults.cursor = "text";
$("#box").draggable({ });
});
</script>