Draggable(拖動)組件 屬性、事件、方法

    Draggable(拖動)即實現頁面元素的拖動效果。

    一、加載方式

        1.css樣式加載：

<div id="box" class="easyui-draggable" style="width:200px;height:150px;background:#F5F6F7;">
    內容部分
</div>

    使用css樣式加載Draggable，方便快捷，但是不利於管理，所以我們有課第二種加載方式，使用Jquery方式加載，一般我們都會使用Jquery的方式進行加載。

        2.Jquery方式加載：

//不加屬性
$('#box').draggable();

//JS部分
$('#box').draggable({
    revert : true,        //拖動後是否回到起始位置，boolean類型
    cursor : 'text',       //鼠標拖拽樣式，十字，文本等
    handle : '#pox',       //句柄，設置後只在設置後只能在當前元素下實現拖拽
    disabled : false,       //設置是否可以被拖拽
    edge : 50,          //設置邊界往內多大距離可以實現拖拽
    axis : 'v',          //設置拖拽方向，v：垂直拖拽，h：水平拖拽
    proxy: 'clone',        //設置代理元素，使用clone時爲複製當前元素
    deltaX : 10,         //被拖拽元素左上角距離當前光標的X軸方向的距離
    deltaY : 10,         //被拖拽元素左上角距離當前光標的Y軸方向的距離  
    proxy: function(source){    //自定義代理元素
    var p = $('<div style="border:1px solid
    #ccc;width:400px;height:200px;"></div>');
    p.html($(source).html()).appendTo('body');
    return p;
    },
});

//HTML部分
<div id="box" style="width:400px;height:200px;background:red;">
    內容部分
</div>

    二、事件

       1.onBeforeDrag 拖動前發生

$('#box').draggable({
    onBeforeDrag : function (e) {
        alert('拖動之前觸發！');
        //return false;
    }
});

在拖動前發生，既當鼠標點擊元素時發生，當返回false時將無法拖拽，我們不會讓它直接返回false，因爲這樣沒有任何意義，在使用時應該有充足的邏輯判斷。

    2.onStartDrag 拖動開始時發生

$('#box').draggable({
    onStartDrag : function (e) {
        alert('拖動開始時觸發！');
        //return false;
    }
});

在鼠標點擊後拖動的一瞬間執行，執行時間在onBeforeDrag之後。

   3.onDrag拖拽過程中執行

$('#box').draggable({
    onDrag : function (e) {
        alert('拖動過程中觸發！');
    }
});

在拖動的過程中執行，當鼠標一移動就會執行，當不能拖動時返回false

   4.onStopDrag 拖動停止後發生

$('#box').draggable({
    onStopDrag : function (e) {
        alert('在拖動停止時觸發！');
    }
});

在拖動結束後觸發，即鬆開鼠標時執行，無返回值。

   5.以上事件可組合使用，執行順序爲onBeforeDrag --> onBeforeDrag --> onDrag --> onStopDrag

$('#box').draggable({
    onBeforeDrag : function (e) {
         alert('拖動之前觸發！');
        //return false;
    },
    onStartDrag : function (e) {
       alert('拖動時觸發！');
    },
    onDrag : function (e) {
        alert('拖動過程中觸發！');
    },
    onStopDrag : function (e) {
        alert('在拖動停止時觸發！');
},});

   三、方法

    

方法名	說明
option	返回屬性對象
proxy	如果代理屬性被設置則返回該拖動代理元素
enabl	允許拖
disable	禁止拖動

//返回屬性對象
console.log($('#box').draggable('options'));

//返回代理元素
onStartDrag : function (e) {
console.log($('#box').draggable('proxy'));
},

//禁止拖動
$('#box').draggable('disable');

//允許拖放
$('#box').draggable('enable');

   四、設置默認屬性

    在一次設置後當前頁面所有拖拽都會共享這個屬性，不用再去設置。

$(function(){
    $.fn.draggable.defaults.cursor = 'text';
});