EasyUI系列學習(三)-Draggable（拖動）

一、創建拖動組件

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>