痞客興的部落格

本文介紹EasyUI的視窗拖動功能Draggable

第一種方法 使用class方式載入功能,加入下面橘色區塊

<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:cyan">
                dialog content.
</div>

第二種方法 使用js方式載入功能

js檔加入

$(function()
    $('#box').draggable();
});

html檔要有id box的區塊

<div id="box" style="width:400px;height:200px;background:cyan">
                dialog content.
</div>

下面介紹Draggable的屬性

draggable({ revert : true }); //拖放後放開會回到原地

draggable({ cursor : text }); //設定拖放時的滑鼠指標樣式

draggable ({ handle : '#id' }); //設定可以提供拖放的區域

draggable ({ disable : true }); //設定拖放功能停止

draggable ({ edge : 10 }); //設定可供拖放的區域往內縮10px

draggable ({ axis : 'v' }); //固定拖放方向,v是只能垂直拖放,h是只能水平拖放

draggable({ proxy : 'clone', deltaX : 10, deltaY : 10  }); //proxy拖放時會出現一個分身,滑鼠放開時才移動,deltaX及deltaY是設定以拖放區域左上角為x0y0,若要離遠一點把數字加大,負整數則是往內縮.

draggable({ proxy : function(source){ console.log(source); } }); //會將被移動的區塊資訊輸出在console上,這方法可以用來做更多的程式應用.

draggable({ 
        proxy : function(source){
            var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">')
            p.appendTo('body');  //改成p.html($(source).html()).appendTo('body'); 除了虛框外會連裡面的html內容一起拖放
            return p;
        }            
});  //拖動時會產生一個虛框,滑鼠放開時才移動

接下來介紹Draggable的事件

onBeforeDrag 拖動前,如果程式中return false; 就會取消拖動

onStartDrag 開始拖動

onDrag 拖動過程中(會一直觸發),如果程式中return false; 就會取消拖動

onStopDrag 拖動結束

用法如下,將下例中的onBeforeDrag改成你要的事件,function裡改成你要做的動作就行了

draggable({ 
        onBeforeDrag : function(e){
            alert('BeforeStart');
        }            
});

最後介紹draggable的方法

draggable('enable'); //啟用拖放

draggable('disable'); //停用拖放

draggable('options'); //施用拖放功能主體的參數值,例如console.log($('#id').draggable('options')); 會將參數值列到console上面

draggable('proxy'); //施用拖放功能主體的proxy的參數值,需寫在拖動的事件中

修改功能模組預設值

$(function(){

    $.fn.draggable.defaults.cursor = 'text';

});

本文參考李炎恢EasyUI視頻實作,記錄步驟備忘.