jQueryEasyUI中的拖拽事件通過給它設置代理元素使其拖拽、可設置拖動元素相對于x.y軸拖動，可設置拖拽何時停止等效果

jQuery中的easyui是一個非常好用的插件，它雖然使用簡單方便，但是它的功能確十分強大，今天將向大家介紹如何使用easyui插件實現基本的拖動和放置，有一定的參考價值，希望對大家有所幫助。

【推薦課程：jQueryEasyUI教程】

Draggable(拖拽)

Draggable是easyui中用于實現拖拽功能的一個插件，通過它我們可以實現對控件的拖拽效果。

它具有以下屬性值：

屬性名含義proxy

指拖動時要使用的代理元素，設置為clone時，克隆元素將被用作代理；如果指定一個函數，它必須返回一個 jQuery 對象。revert是一個boolean值，設置為 true時表示拖動結束后元素將返回它的開始位置。 (默認值為false)cursor 拖動時的 css 光標，默認值為move deltaX 指的是拖動的元素相對于當前光標的 X 軸的位置，默認值為null deltaY 指的是拖動的元素相對于當前光標的 Y 軸位置，默認值為null handle 指啟動可拖動元素的處理，默認值為null disabled是一個boolean值，如果設置為 true，則停止可拖動，默認值為false edge 指能夠在其中開始可拖動的拖動寬度，默認值為0 axis 指定義拖動元素可在其上移動的軸，可用的值是 'v' 或 'h'，當設為 null，將會沿著 'v' 和 'h' 的方向移動

案例分析：

通過三個div元素來啟用它們的拖動和放置

外部引用必須有的插件

HTML與CSS代碼

div{

width:100px;

height: 100px;

margin-bottom:5px;

text-align: center;

line-height: 100px;

}

#box1{background: pink;}

#box2{background: skyblue;}

#box3{background: yellow;}

box1box2box3

效果圖：

設置box1元素為可拖動的

$('#box1').draggable();

效果圖：

對于box2通過給原來的元素的代理(proxy)創建一個clone值，讓其可以拖動

$('#box2').draggable({

proxy:'clone'

});

效果圖：

第三個box我們設置元素只能在v軸上拖動：

$("#box3").draggable({

axis: 'v'

})

效果圖：

總結：以上就是本篇文章的全部內容了，希望對大家學習有所幫助。

總結

以上是生活随笔為你收集整理的中如何使用echart_jQueryEasyUI中的拖拽事件如何使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。