easyUI基础-draggable拖动

Draggable是什么

   Draggable是easyui中用于实现拖拽功能的一个插件。利用它，我们可以实现控件的拖拽效果。

   Draggble覆盖默认值$.fn.draggable.defaults。

用法

1.通过标记创建可拖动（draggable）元素。

<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
    <div id="title" style="background:#ccc;">title</div>
</div>

2.使用 javascript 创建可拖动（draggable）元素。

<div id="dd" style="width:100px;height:100px;">
    <div id="title" style="background:#ccc;">title</div>
</div>

$('#dd').draggable({
    handle:'#title'
});

属性

一、创建拖动组件

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>