快捷導(dǎo)航

如何使用jQuery Draggable和Droppable實(shí)現(xiàn)拖拽功能

更新時(shí)間：2013年07月05日 16:41:48 作者：

本篇文章是對(duì)使用jQuery Draggable和Droppable實(shí)現(xiàn)拖拽功能的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下

在以前的文章中我已經(jīng)介紹了web開(kāi)發(fā)中基本拖放原理，現(xiàn)在給出需要完成的功能。最后運(yùn)行的效果如下圖所示：

主要功能需求說(shuō)明：
1.左側(cè)的元素結(jié)構(gòu)最后會(huì)通過(guò)Ajax call服務(wù)器的數(shù)據(jù)來(lái)生成，能支持多級(jí)元素。父節(jié)點(diǎn)可以折疊起來(lái)

2.用戶可以通過(guò)拖放的操作，將元素從左側(cè)拖放到右側(cè)。如果是拖的父節(jié)點(diǎn)元素，那么需要把它子節(jié)點(diǎn)的元素一并拖到右邊

3.元素放到右側(cè)，右側(cè)可以接受元素的區(qū)域有2種可能。一種新建一個(gè)區(qū)域，就類似“華東交通大學(xué)”所示。另外一種就是拖放到已經(jīng)有元素的區(qū)域。兩者的關(guān)系是“或”。單個(gè)元素區(qū)域有“非”和“且”的關(guān)系。點(diǎn)擊右邊刪除按鈕可以刪除節(jié)點(diǎn)元素。

第一步：左側(cè)元素可以拖
官方給出的實(shí)例是直接在要拖動(dòng)的元素上添加class="ui-widget-content"。最初我是在所有要拖動(dòng)的元素都添加了“ui-widget-content”類別。但是測(cè)試拖動(dòng)結(jié)果，發(fā)現(xiàn)元素只能在它所在的container里面拖動(dòng)，再往右拖動(dòng)，div會(huì)出現(xiàn)水平或垂直滾動(dòng)條。不知道是不是自己在參數(shù)設(shè)置上不對(duì)。container設(shè)置了overflow:auto。
效果如下圖所示:

因?yàn)樽罱K的左側(cè)元素節(jié)點(diǎn)是通過(guò)Ajax訪問(wèn)后臺(tái)返回json數(shù)據(jù)，然后通過(guò)Javascript動(dòng)態(tài)生成這種結(jié)構(gòu)，而已不能為動(dòng)態(tài)生成的元素綁定drag事件，也就不能調(diào)用draggable方法，所以我使用了一個(gè)稱之“中間拖拽容易元素”，這div一直在頁(yè)面上。只是默認(rèn)不顯示，只要用戶開(kāi)始拖拽左側(cè)的元素時(shí)，它就出現(xiàn)了。當(dāng)然這里需要自己手動(dòng)添加很多代碼。

復(fù)制代碼代碼如下:

<div id='draggableDiv' class="ui-widget-content">
        中間拖拽容器元素
    </div>
    <script type="text/javascript">
        $("#draggableDiv").draggable({
            containment: "parent",
            drag: function (event, ui) { console.log("拖拽中"); },
            stop: function () { console.log("拖拽結(jié)束"); }
        });
    </script>

第二步：將要拖的元素內(nèi)容復(fù)制到draggableDiv上。實(shí)現(xiàn)拖動(dòng)父節(jié)點(diǎn)時(shí)，其下面的子節(jié)點(diǎn)元素也要拖放到右邊。如果是拖動(dòng)的子節(jié)點(diǎn)元素，就在右邊直接顯示子節(jié)點(diǎn)元素。父節(jié)點(diǎn)和子節(jié)點(diǎn)是相對(duì)的，因?yàn)樽髠?cè)樹(shù)形結(jié)構(gòu)的節(jié)點(diǎn)可以是無(wú)限級(jí)的，所以一個(gè)元素既可能是子節(jié)點(diǎn)元素，也會(huì)是父節(jié)點(diǎn)元素。通過(guò)監(jiān)聽(tīng)鼠標(biāo)的mousedown和mouseup事件，來(lái)判斷用戶在拖動(dòng)元素。這步的原理如下圖所示：

當(dāng)用戶拖動(dòng)B節(jié)點(diǎn)時(shí)，首先把B元素上的內(nèi)容復(fù)制給draggableDiv元素，當(dāng)用戶拖動(dòng)B元素，其實(shí)是拖動(dòng)draggableDiv元素。所以我們要計(jì)算出我們點(diǎn)擊的B元素的位置，然后讓draggableDiv在拖動(dòng)時(shí)候顯示正確的位置，然后拖動(dòng)就是draggableDiv元素，用戶看起來(lái)是拖動(dòng)的B節(jié)點(diǎn)元素。

復(fù)制代碼代碼如下:

var clickElement = null; $(".threepanels .ptreelist").bind("mousedown",function (event) { 
//獲取當(dāng)前mousedown元素的內(nèi)容
var itemContent = $(this).html(); var draggableDiv = $("#draggableDiv");
$(draggableDiv).css({ "display": "block", "height": 0 }); 
//將點(diǎn)擊的元素內(nèi)容復(fù)制 
clickElement = $(this).clone(); 
var currentdiv = $(this).offset(); $(draggableDiv).css({ "top": currentdiv.top, "left": currentdiv.left }); draggableDiv.trigger(event); 
//取消默認(rèn)行為 return false; }); 
$("#draggableDiv").mouseup(function (event) { $(this).css({ "height": "0" }); }); 
//拖動(dòng)元素時(shí)鼠標(biāo)的位置 
var dragDivLeft = 0; 
var dragDivTop = 0; 
$("#draggableDiv").draggable({ containment: "parent", drag: function (event, ui) { $("#draggableDiv").css({ "width": "260px", "height": "22px" }); 
    $("#draggableDiv").append(clickElement); 
    var closeTop = $(".closeBar").offset().top; 
    dragDivLeft = event.target.offsetLeft; 
    dragDivTop = event.target.offsetTop; }, 
    stop: function () { 
        //拖拽結(jié)束，將拖拽容器內(nèi)容清空 
        $("#draggableDiv").html(""); 
        $("#draggableDiv").css({"height":"0"}); } 
});

第三步：右邊的元素可以放到指定的位置上
需要將元素拖到指定的區(qū)域里面，然后釋放操作。完成“放”的操作?？梢詮纳蠄D看出，我是將元素的上邊左邊和下邊緣的左邊存到一個(gè)數(shù)組里面。然后在“拖”的過(guò)程中，一直記錄了拖動(dòng)的左邊，放到右側(cè)時(shí)，就可以判斷當(dāng)前元素將要放的位置。具體可以下載代碼查看。
完成代碼之后的效果圖如下：