EasyUI系列学习-Draggable（拖动）

Posted 2020-06-14

一、创建拖动组件

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：可以在其中拖动的容器的宽度

<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>