這篇文章主要介紹了jQuery EasyUI中拖拽事件的使用方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)是專業(yè)的郊區(qū)網(wǎng)站建設(shè)公司，郊區(qū)接單;提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行郊區(qū)網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

jQueryEasyUI中的拖拽事件通過(guò)給它設(shè)置代理元素使其拖拽、可設(shè)置拖動(dòng)元素相對(duì)于x.y軸拖動(dòng)，可設(shè)置拖拽何時(shí)停止等效果

jQuery中的easyui是一個(gè)非常好用的插件，它雖然使用簡(jiǎn)單方便，但是它的功能確十分強(qiáng)大，今天將向大家介紹如何使用easyui插件實(shí)現(xiàn)基本的拖動(dòng)和放置，有一定的參考價(jià)值，希望對(duì)大家有所幫助。

【推薦課程：jQueryEasyUI教程】

Draggable(拖拽)

Draggable是easyui中用于實(shí)現(xiàn)拖拽功能的一個(gè)插件，通過(guò)它我們可以實(shí)現(xiàn)對(duì)控件的拖拽效果。

它具有以下屬性值：

屬性名	含義
proxy	指拖動(dòng)時(shí)要使用的代理元素，設(shè)置為clone時(shí)，克隆元素將被用作代理；如果指定一個(gè)函數(shù)，它必須返回一個(gè) jQuery 對(duì)象。
revert	是一個(gè)boolean值，設(shè)置為 true時(shí)表示拖動(dòng)結(jié)束后元素將返回它的開(kāi)始位置。  （默認(rèn)值為false）
cursor	拖動(dòng)時(shí)的 css 光標(biāo)，默認(rèn)值為move
deltaX	指的是拖動(dòng)的元素相對(duì)于當(dāng)前光標(biāo)的 X 軸的位置，默認(rèn)值為null
deltaY	指的是拖動(dòng)的元素相對(duì)于當(dāng)前光標(biāo)的 Y 軸位置，默認(rèn)值為null
handle	指啟動(dòng)可拖動(dòng)元素的處理，默認(rèn)值為null
disabled	是一個(gè)boolean值，如果設(shè)置為 true，則停止可拖動(dòng)，默認(rèn)值為false
edge	指能夠在其中開(kāi)始可拖動(dòng)的拖動(dòng)寬度，默認(rèn)值為0
axis	指定義拖動(dòng)元素可在其上移動(dòng)的軸，可用的值是 'v' 或 'h'，當(dāng)設(shè)為 null，將會(huì)沿著 'v' 和 'h' 的方向移動(dòng)

案例分析：

通過(guò)三個(gè)div元素來(lái)啟用它們的拖動(dòng)和放置

外部引用必須有的插件

HTML與CSS代碼

box1
box2
box3

效果圖：

設(shè)置box1元素為可拖動(dòng)的

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

效果圖：

對(duì)于box2通過(guò)給原來(lái)的元素的代理（proxy）創(chuàng)建一個(gè)clone值，讓其可以拖動(dòng)

$('#box2').draggable({
        proxy:'clone'
    });

效果圖：

第三個(gè)box我們?cè)O(shè)置元素只能在v軸上拖動(dòng)：

$("#box3").draggable({
            axis: 'v'
  })

效果圖：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享jQuery EasyUI中拖拽事件的使用方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

標(biāo)題名稱：jQueryEasyUI中拖拽事件的使用方法-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://weahome.cn/article/ccoodd.html