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

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

成都創(chuàng)新互聯(lián)是一家專業(yè)提供源城企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、做網(wǎng)站、H5建站、小程序制作等業(yè)務(wù)。10年已為源城眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

主要功能需求說明：

1.左側(cè)的元素結(jié)構(gòu)最后會通過Ajax call服務(wù)器的數(shù)據(jù)來生成，能支持多級元素。父節(jié)點可以折疊起來

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

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

第一步：左側(cè)元素可以拖

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

效果如下圖所示:

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

代碼如下:

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上。實現(xiàn)拖動父節(jié)點時，其下面的子節(jié)點元素也要拖放到右邊。如果是拖動的子節(jié)點元素，就在右邊直接顯示子節(jié)點元素。父節(jié)點和子節(jié)點是相對的，因為左側(cè)樹形結(jié)構(gòu)的節(jié)點可以是無限級的，所以一個元素既可能是子節(jié)點元素，也會是父節(jié)點元素。通過監(jiān)聽鼠標(biāo)的mousedown和mouseup事件，來判斷用戶在拖動元素。這步的原理如下圖所示：

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

代碼如下:

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 });

//將點擊的元素內(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" }); });

//拖動元素時鼠標(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ū)域里面，然后釋放操作。完成“放”的操作。可以從上圖看出，我是將元素的上邊左邊和下邊緣的左邊存到一個數(shù)組里面。然后在“拖”的過程中，一直記錄了拖動的左邊，放到右側(cè)時，就可以判斷當(dāng)前元素將要放的位置。具體可以下載代碼查看。

jquery拖拽交換位置

舉例如下：

!-- 引入jQuery --

script src="../../scripts/jquery.js" type="text/JavaScript"/script

script type="text/javascript"

//![CDATA[

$(function(){

var $one_li = $("ul li:eq(1)"); // 獲取ul節(jié)點中第二個li元素節(jié)點

var $two_li = $("ul li:eq(2)"); // 獲取ul節(jié)點中第三個li元素節(jié)點

$two_li.insertBefore($one_li); //移動節(jié)點

});

//]]

/script

/head

body

p title="選擇你最喜歡的水果." 你最喜歡的水果是?/p

ul

li title='蘋果'蘋果/li

li title='橘子'橘子/li

li title='菠蘿'菠蘿/li

/ul

怎樣控制jquery 拖拽事件

jquery ui有禁用功能

$(selector).draggable("disable"); // 禁止其拖動功能

$(selector).draggable("enable"); // 激活其拖動功能

$(selector).draggable("destory"); // 完全刪除拖動功能

jQuery如何實現(xiàn)多個div窗口任意拖動

jquery實現(xiàn)拖拽很簡單的：

$(element).myDrag({????

parent:'parent',?//定義拖動不能超出的外框,拖動范圍????

randomPosition:true,?//初始化隨機位置????

direction:'all',?//方向????

handler:false,?//把手????

dragStart:function(x,y){},?//拖動開始?x,y為當(dāng)前坐標(biāo)????

dragEnd:function(x,y){},?//拖動停止?x,y為當(dāng)前坐標(biāo)????

dragMove:function(x,y){}?//拖動進行中?x,y為當(dāng)前坐標(biāo)????

});

具體的可以看這里：jquery.drag.js—實現(xiàn)拖拽效果的插件

有完整的在線實例演示的！！！

div拖拽縮放jquery插件編寫——帶8個控制點

拖拽以及縮放需要有一個范圍，姑且管這個叫舞臺（stage）。另外，在舞臺范圍內(nèi)，如何以一種簡單的方式定義拖拽項？可以通過給div增加一個拖拽class（例如：resize-item），拖拽項應(yīng)該是absolute布局，舞臺是relative/absolute布局

所以拖拽類需要有如下兩個參數(shù)

控制面板初始化的時候，應(yīng)該是隱藏的，只有點擊對應(yīng)的拖拽項的時候才出現(xiàn)，并且點擊舞臺空白部分，需要隱藏控制面板（組織事件冒泡）

如果這篇文章對你有用，不妨點個贊

查看源碼

網(wǎng)站名稱：拖拽jquery,拖拽臂式半獨立懸架和扭力梁式非獨立懸架哪個好
文章分享：http://chinadenli.net/article8/dsgccop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、App設(shè)計、網(wǎng)站導(dǎo)航、Google、網(wǎng)站改版、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)