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

主要功能需求說(shuō)明：

創(chuàng)新互聯(lián)專注于聞喜企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城開(kāi)發(fā)。聞喜網(wǎng)站建設(shè)公司,為聞喜等地區(qū)提供建站服務(wù)。全流程按需求定制開(kāi)發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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。

效果如下圖所示:

因

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

jquery 簡(jiǎn)介

JQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascript庫(kù)。它是輕量級(jí)的js庫(kù) ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁(yè)面保持代碼和html內(nèi)容分離，也就是說(shuō)，不用再在html里面插入一堆js來(lái)調(diào)用命令了，只需要定義id即可。

jQuery是一個(gè)兼容多瀏覽器的javascript庫(kù)，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國(guó)人John Resig在紐約的barcamp發(fā)布，吸引了來(lái)自世界各地的眾多JavaScript高手加入，由Dave Methvin率領(lǐng)團(tuán)隊(duì)進(jìn)行開(kāi)發(fā)。如今，jQuery已經(jīng)成為最流行的javascript庫(kù)，在世界前10000個(gè)訪問(wèn)最多的網(wǎng)站中，有超過(guò)55%在使用jQuery。

jQuery是免費(fèi)、開(kāi)源的，使用MIT許可協(xié)議。jQuery的語(yǔ)法設(shè)計(jì)可以使開(kāi)發(fā)更加便捷，例如操作文檔對(duì)象、選擇DOM元素、制作動(dòng)畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開(kāi)發(fā)者編寫插件。其模塊化的使用方式使開(kāi)發(fā)者可以很輕松的開(kāi)發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁(yè)。

jQuery，顧名思義，也就是JavaScript和查詢（Query），即是輔助JavaScript開(kāi)發(fā)的庫(kù)。

歷史

大概在 1992 年，一家稱作 Nombas 的公司開(kāi)發(fā)了一種叫做 C 減減（C-minus-minus，簡(jiǎn)稱 Cmm）的嵌入式腳本語(yǔ)言。Cmm 背后的理念很簡(jiǎn)單：一個(gè)足夠強(qiáng)大可以替代宏操作（macro）的腳本語(yǔ)言，同時(shí)保持與 C （和 C ++）足夠的相似性，以便開(kāi)發(fā)人員能很快學(xué)會(huì)。這個(gè)腳本語(yǔ)言捆綁在一個(gè)叫做 CEnvi 的共享軟件中，它首次向開(kāi)發(fā)人員展示了這種語(yǔ)言的威力。

Nombas 最終把 Cmm 的名字改成了 ScriptEase，原因是后面的部分（mm）聽(tīng)起來(lái)過(guò)于消極，同時(shí)字母 C “令人害怕”。

當(dāng) Netscape Navigator 嶄露頭角時(shí)，Nombas 開(kāi)發(fā)了一個(gè)可以嵌入網(wǎng)頁(yè)中的 CEnvi 的版本。這些早期的試驗(yàn)被稱為 Espresso Page（濃咖啡般的頁(yè)面），它們代表了第一個(gè)在萬(wàn)維網(wǎng)上使用的客戶端語(yǔ)言。而 Nombas 絲毫沒(méi)有料到它的理念將會(huì)成為萬(wàn)維網(wǎng)的一塊重要基石。

當(dāng)網(wǎng)上沖浪越來(lái)越流行時(shí)，對(duì)于開(kāi)發(fā)客戶端腳本的需求也逐漸增大。此時(shí)，大部分因特網(wǎng)用戶還僅僅通過(guò) 28.8 kbit/s 的調(diào)制解調(diào)器連接到網(wǎng)絡(luò)，即便這時(shí)網(wǎng)頁(yè)已經(jīng)不斷地變得更大和更復(fù)雜。而更加加劇用戶痛苦的是，僅僅為了簡(jiǎn)單的表單有效性驗(yàn)證，就要與服務(wù)器進(jìn)行多次地往返交互。設(shè)想一下，用戶填完一個(gè)表單，點(diǎn)擊提交按鈕，等待了 30 秒的處理后，看到的卻是一條告訴你忘記填寫一個(gè)必要的字段。

那時(shí)正處于技術(shù)革新最前沿的 Netscape，開(kāi)始認(rèn)真考慮開(kāi)發(fā)一種客戶端腳本語(yǔ)言來(lái)解決簡(jiǎn)單的處理問(wèn)題。

當(dāng)時(shí)工作于 Netscape 的 Brendan Eich，開(kāi)始著手為即將在 1995 年發(fā)行的 Netscape Navigator 2.0 開(kāi)發(fā)一個(gè)稱之為 LiveScript 的腳本語(yǔ)言，當(dāng)時(shí)的目的是在瀏覽器和服務(wù)器（本來(lái)要叫它 LiveWire）端使用它。Netscape 與 Sun 及時(shí)完成 LiveScript 實(shí)現(xiàn)。

就在 Netscape Navigator 2.0 即將正式發(fā)布前，Netscape 將其更名為 JavaScript，目的是為了利用 Java 這個(gè)因特網(wǎng)時(shí)髦詞匯。Netscape 的賭注最終得到回報(bào)，JavaScript 從此變成了因特網(wǎng)的必備組件。

因?yàn)?JavaScript 1.0 如此成功，Netscape 在 Netscape Navigator 3.0 中發(fā)布了 1.1 版。恰巧那個(gè)時(shí)候，微軟決定進(jìn)軍瀏覽器，發(fā)布了 IE 3.0 并搭載了一個(gè) JavaScript 的克隆版，叫做 JScript（這樣命名是為了避免與 Netscape 潛在的許可糾紛）。微軟步入 Web 瀏覽器領(lǐng)域的這重要一步雖然令其聲名狼藉，但也成為 JavaScript 語(yǔ)言發(fā)展過(guò)程中的重要一步。

在微軟進(jìn)入后，有 3 種不同的 JavaScript 版本同時(shí)存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。與 C 和其他編程語(yǔ)言不同的是，JavaScript 并沒(méi)有一個(gè)標(biāo)準(zhǔn)來(lái)統(tǒng)一其語(yǔ)法或特性，而這 3 種不同的版本恰恰突出了這個(gè)問(wèn)題。隨著業(yè)界擔(dān)心的增加，這個(gè)語(yǔ)言的標(biāo)準(zhǔn)化顯然已經(jīng)勢(shì)在必行。

2006年1月，jQuery的第一個(gè)版本面世，至今已經(jīng)有10年多了（注：這個(gè)時(shí)間點(diǎn)是截止至出書時(shí)間）。雖然過(guò)了這么久，但它依然以其簡(jiǎn)潔、靈活的編程風(fēng)格讓人一見(jiàn)傾心。在本篇文章中，我們將講述jQuery的發(fā)展 歷史 ，讓讀者對(duì)jQuery有更多的了解。

在jQuery迅速發(fā)展的同時(shí)，一些大的廠商也看中了商機(jī)。2009年9月，微軟和諾基亞公司正式宣布支持開(kāi)源的jQuery庫(kù)，另外，微軟公司還宣稱他們將把jQuery作為Visual Studio工具集的一部分。他將提供包括jQuery的智能提示、代碼片段、示例文檔編制等內(nèi)容在內(nèi)的功能。微軟和諾基亞公司將長(zhǎng)期成為jQuery的用戶成員，其他成員還有Google，Intel，IBM，Intuit等公司。

2009年1月，jQuery 1.3版發(fā)布，它使用了全新的選擇符引擎Sizzle，在各個(gè)瀏覽器下全面超越其他同類型JavaScript框架的查詢速度，程序庫(kù)的性能也因此有了極大提升。這一版本的第2個(gè)變化就是提供live()方法，使用live()方法可以為當(dāng)前及將來(lái)增加的元素綁定事件，在1.3版之前，如果要為將來(lái)增加的元素綁定事件，需要使用livequery插件，而在1.3版中，可以直接用live()方法。　2005年8月，John Resig提議改進(jìn)Prototype的“Behaviour”庫(kù)，于是他在blog上發(fā)表了自己的想法，并用了3個(gè)例子做說(shuō)明。

2010年2月，jQuery 1.4.2版發(fā)布，它新增了有關(guān)事件委托的兩個(gè)方法：delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。這個(gè)方法比live()來(lái)的方便，而且也可以達(dá)到動(dòng)態(tài)添加事件的作用。比如給表格的每個(gè)td綁定hover事件

特點(diǎn)

1.動(dòng)態(tài)特效

2.AJAX

3.通過(guò)插件來(lái)擴(kuò)展

4.方便的工具 - 例如瀏覽器版本判斷

5.漸進(jìn)增強(qiáng)

6.鏈?zhǔn)秸{(diào)用

7.多瀏覽器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了對(duì)Internet Explorer6,7,8的支持）

歷史 版本

jQuery 1.0

（2006年8月）：該庫(kù)的第一個(gè)穩(wěn)定版本，已經(jīng)具有了對(duì)CSS選擇符、事件處理和AJAX交互的穩(wěn)健支持。

jQuery 1.1

（2007年1月）：這一版大幅簡(jiǎn)化了API。許多較少使用的方法被合并，減少了需要掌握和解釋的方法數(shù)量。

jQuery 1.1.3

（2007年7月）：這次小版本變化包含了對(duì)jQuery選擇符引擎執(zhí)行速度的顯著提升。從這個(gè)版本開(kāi)始，jQuery的性能達(dá)到了Prototype、Mootools以及Dojo等同類JavaScript庫(kù)的水平。

jQuery 1.2

（2007年9月）：這一版去掉了對(duì)XPath選擇符的支持，原因是相對(duì)于CSS語(yǔ)法它已經(jīng)變得多余了。這一版能夠支持對(duì)效果的更靈活定制，而且借助新增的命名空間事件，也使插件開(kāi)發(fā)變得更容易。

jQuery UI（2007年9月）：這個(gè)新的插件套件是作為曾經(jīng)流行但已過(guò)時(shí)的Interface插件的替代項(xiàng)目而發(fā)布的。jQuery UI中包含大量預(yù)定義好的部件（widget），以及一組用于構(gòu)建高級(jí)元素（例如可拖放的界面元素）的工具。

jQuery 1.2.6

（2008年5月）：這一版主要是將Brandon Aaron開(kāi)發(fā)的流行的Dimensions插件的功能移植到了核心庫(kù)中。

jQuery 1.3

（2009年1月）：這一版使用了全新的選擇符引擎Sizzle，庫(kù)的性能也因此有了極大提升。這一版正式支持事件委托特性。

jQuery 1.3.2

（2009年2月）：這次小版本升級(jí)進(jìn)一步提升了庫(kù)的性能，例如改進(jìn)了：visible/:hidden選擇符、.height()/.width()方法的底層處理機(jī)制。另外，也支持查詢的元素按文檔順序返回。

jQuery 1.4

（2010年1月14號(hào)）：對(duì)代碼庫(kù)進(jìn)行了內(nèi)部重寫組織，開(kāi)始建立一些風(fēng)格規(guī)范。老的core.js文件被分為attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js；CSS和attribute的邏輯分離。

重要變化：

1. Ajax重寫

Ajax模塊完全進(jìn)行了重寫。新增一個(gè)jXHR對(duì)象，為不同瀏覽器內(nèi)置的XMLHttpRequest提供了一致的超集。對(duì)于XMLHttpRequest之外的傳輸機(jī)制，比如JSONP請(qǐng)求，jXHR對(duì)象也可以進(jìn)行處理。（詳情可以參見(jiàn)：jQuery.ajax文檔）

此外，系統(tǒng)的可擴(kuò)展性大大增強(qiáng)，可以附加各種數(shù)據(jù)處理器、過(guò)濾器和傳輸機(jī)制，為開(kāi)發(fā)新的Ajax插件提供了方便。

2. 延遲對(duì)象

延遲對(duì)象（Deferred Object，jQuery.Deferred對(duì)象）是一個(gè)可鏈接的（chainable）實(shí)用工具對(duì)象，實(shí)現(xiàn)了Promise接口，可以在回調(diào)隊(duì)列中注冊(cè)多個(gè)回調(diào)、調(diào)用回調(diào)隊(duì)列并轉(zhuǎn)發(fā)任何同步/異步函數(shù)的成敗狀態(tài)。正如Using Deferreds in jQuery 1.5一文中說(shuō)明的，其結(jié)果是在jQuery中能夠?qū)⒁蕾囉谀硞€(gè)任務(wù)（事件）結(jié)果的邏輯與任務(wù)本身解耦了。這一點(diǎn)在JavaScript中其實(shí)并不新鮮，Mochikit和Dojo等已經(jīng)實(shí)現(xiàn)有些日子了。由于jQuery 1.5的Ajax模塊內(nèi)置使用了延遲對(duì)象，因此通過(guò)jQuery編寫Ajax程序?qū)⒆詣?dòng)獲得這一功能。

開(kāi)發(fā)人員借此可以使用無(wú)法立即獲得的返回值（如異步Ajax請(qǐng)求的返回結(jié)果），而且第一次能夠附加多個(gè)事件處理器。

例如，使用了新的jQuery內(nèi)部Ajax API就可以實(shí)現(xiàn)下面的代碼了：

// Assign handlers immediately after making the request,// and remember the jxhr object for this request var jxhr = $.ajax({ url: "example.php" }) .success(function() { alert("success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); });// perform other work here ... // Set another completion function for the request above jxhr.complete(function(){ alert("second complete"); });

此外，使用jQuery.Deferred還可以開(kāi)發(fā)自己的延遲對(duì)象。更多詳情參見(jiàn)：延遲對(duì)象文檔。

3. jQuery.sub()

jQuery 1.5提供了一種創(chuàng)建和修改jQuery副本的方式。可以用來(lái)添加不向外部公開(kāi)的方法，或者對(duì)jQuery的某些方法進(jìn)行重新定義以提供新功能，或者提供更好的封裝、避免名稱空間沖突。當(dāng)然，也可以用來(lái)開(kāi)發(fā)插件，但Resig強(qiáng)烈建議在開(kāi)發(fā)插件之前，先考慮jQuery UI widget工廠。

值得注意的是，sub函數(shù)并不提供真正的隔離，所有方法、數(shù)據(jù)、調(diào)用仍然依靠jQuery本身來(lái)支持。

4. 遍歷性能提高

在新版本中.children(),.prev(),.next()幾個(gè)常用的遍歷函數(shù)性能有了顯著提高。

5. 內(nèi)部開(kāi)發(fā)系統(tǒng)

John Resig還特別提到了jQuery團(tuán)隊(duì)內(nèi)部開(kāi)發(fā)系統(tǒng)的兩點(diǎn)改變：一是服務(wù)器端用Node.js替換了老的Java/Rhino系統(tǒng)，使得團(tuán)隊(duì)可以專注于JavaScript環(huán)境的新變化；二是所用的代碼優(yōu)化程序從Google Closure切換到UglifyJS，新工具的壓縮效果非常令人滿意。

使用方法

jQuery可以下載使用，有兩個(gè)版本的 jQuery 可供下載

Production version - 用于實(shí)際的網(wǎng)站中，已被精簡(jiǎn)和壓縮。

Development version - 用于測(cè)試和開(kāi)發(fā)（未壓縮，是可讀的代碼）

jQuery 1.8.0版時(shí)壓縮前后的對(duì)比

插件機(jī)制

jQuery的官方插件是jQuery UI。開(kāi)發(fā)者可以任意擴(kuò)展jQuery的函數(shù)庫(kù)或者按照自己的需求開(kāi)發(fā)UI組件。網(wǎng)上已經(jīng)有數(shù)以萬(wàn)計(jì)的jQuery插件，覆蓋各種各樣的需求。例如Ajax輔助、數(shù)據(jù)表格、動(dòng)態(tài)列表、XML工具、拖曳、cookie處理、彈出層等等。jQuery 的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇,例如ComponentOne Studio for ASP NET Wijmo.

隨著jQuery插件在網(wǎng)站建設(shè)過(guò)程中的使用率不斷的增加，所以有必要跟進(jìn)時(shí)代步伐開(kāi)發(fā)出一些新的插件/代碼片段，以此來(lái)鞏固并提高前端用戶體驗(yàn)，將用戶體驗(yàn)提升到一個(gè)新的高度。其中包括Flat jQuery Price Slider、Gmaps jQuery Map Plugin 、FormChimp——MailChimp Ajax plugin for jQuery 等。

控件

jQuery Gantt控件是一個(gè)基于原生HTML5/jQuery，功能豐富的控件，該控件真正實(shí)現(xiàn)了跨平臺(tái)，在許多設(shè)備和瀏覽器中無(wú)縫的運(yùn)行。

使用項(xiàng)目甘特圖中內(nèi)置的調(diào)度，依賴等功能實(shí)現(xiàn)任務(wù)分層列表的可視化。

使用資源甘特圖實(shí)現(xiàn)一個(gè)資源利用視圖。

使用基于API的jQuery或者基于API的MVC可幫您輕松地安裝甘特圖并加快應(yīng)用速度。

可與諸如KnockOut(KO),jQuery.tmpl等流行的jQuery模式一同使用。

jquery 中當(dāng)鼠標(biāo)被按下然后拖動(dòng),經(jīng)過(guò)一個(gè)元素,如何觸發(fā)這個(gè)元素綁定的懸浮事件呢

用h5的拖放事件。ondrag,ondragenter,ondragover,ondrop等。給你一個(gè)demo。記得自己加圖片。

!DOCTYPE?HTML

html

head

titleHTML5實(shí)現(xiàn)拖拽操作/title

meta?charset="utf-8"/

style

.album

{

border:?3px?dashed?#ccc;

float:?left;

margin:?10px;

min-height:?100px;

padding:?10px;

width:?220px;

}

/style

/head

body

div?id="info"

h2溫馨提示：可將照片直接拖到垃圾箱中/h2

/div

div?id="album"?class="album"

h2相冊(cè)/h2

img?draggable="true"?id="img1"?src="jq/audio1.png"?/

img?draggable="true"?id="img2"?src="jq/audio2.png"?/

img?draggable="true"?id="img3"?src="jq/audio3.png"?/

div?id="div1"?draggable="true"暗涌/div

/div

div?id="trash"?class="album"

h2垃圾箱/h2

h1?id="h1"?draggable="true"what/h1

/div

br/

/body

script

console.log("start");

info?=?document.getElementById("info");

src?=?document.getElementById("album");

target?=?document.getElementById("trash");

function?converse(){

target.ondragstart?=?function(e){

var?dragid?=?e.target.id;

var?divdraged?=?document.getElementById(dragid);

console.log(divdraged);

divdraged.ondragend?=?function(){

info.innerHTML?=?"h2溫馨提示：可將照片直接拖到垃圾箱中/h2";

}

e.dataTransfer.setData("div",dragid);

}

target.ondrag?=?function(){

info.innerHTML?=?"h2確認(rèn)回收此垃圾/h2"

}

src.ondrop?=?function(e){

var?dragid?=?e.dataTransfer.getData("div");

console.log(dragid);

var?dragobject?=?document.getElementById(dragid);

console.log(dragobject);

dragobject.parentNode.removeChild(dragobject);

info.innerHTML?=?"h2恢復(fù)成功！/h2";

src.appendChild(dragobject);

e.preventDefault();

}

src.ondragenter?=?function(e){

e.preventDefault();

}

src.ondragover?=?function(e){

e.preventDefault();

}

}

function?init(){

src.ondragstart?=?function?(e)?{

var?dragImgId?=?e.target.id;

console.log(dragImgId);

var?dragImg?=?document.getElementById(dragImgId);

dragImg.ondragend?=?function(e){

info.innerHTML="h2溫馨提示：可將照片直接拖到垃圾箱中/h2";

};

e.dataTransfer.setData("img",dragImgId);

};

src.ondrag?=?function(e){

info.innerHTML="h2--照片正在被拖動(dòng)--/h2";

}

target.ondragenter?=?function(e){

e.preventDefault();

}

target.ondragover?=?function(e){

e.preventDefault();

}

target.ondrop?=?function?(e)?{

var?draggedID?=?e.dataTransfer.getData("img");

console.log(draggedID);

var?oldElem?=?document.getElementById(draggedID);

oldElem.parentNode.removeChild(oldElem);

target.appendChild(oldElem);

info.innerHTML="h2溫馨提示：可將照片直接拖到垃圾箱中/h2";

e.preventDefault();

}

}

init();

converse();

/script

/html

簡(jiǎn)單拖拽即生成網(wǎng)頁(yè) VvvebJs

VvvebJs是一個(gè)開(kāi)源的網(wǎng)頁(yè)拖拽自動(dòng)生成的JavaScript庫(kù)，你可以以簡(jiǎn)單拖拽的方式生成自己需要的網(wǎng)頁(yè)樣式，內(nèi)置jquery和Bootstrap，你可以拖拽相關(guān)的組件進(jìn)行網(wǎng)頁(yè)的構(gòu)建，非常的方便，而且可以實(shí)時(shí)修改代碼，功能豐富，使用簡(jiǎn)單，界面友好，特別適合一些專注于展示的網(wǎng)頁(yè)設(shè)計(jì)，需要的朋友不可錯(cuò)過(guò)！

在線演示：

相關(guān)特性

1、組件和塊/片段拖放;

2、撤銷/重做操作;

3、一個(gè)或兩個(gè)面板界面;

4、文件管理器和組件層次結(jié)構(gòu)導(dǎo)航添加新頁(yè)面;

5、實(shí)時(shí)代碼編輯器;

6、包含示例php腳本的圖像上傳;

7、頁(yè)面下載或?qū)С鰄tml或保存頁(yè)面在服務(wù)器上包含示例PHP腳本;

8、組件/塊列表搜索;

9、Bootstrap 4組件等組件。

默認(rèn)情況下，編輯器附帶Bootstrap 4和Widgets組件，可以使用任何類型的組件和輸入進(jìn)行擴(kuò)展。

使用方式

要初始化編輯器，調(diào)用Vvveb.Builder.init。第一個(gè)參數(shù)是要加載以進(jìn)行編輯的URL，它必須位于相同的子域中才能進(jìn)行編輯。第二個(gè)參數(shù)是頁(yè)面加載完成時(shí)調(diào)用的函數(shù)，默認(rèn)情況下調(diào)用編輯器Gui.init();

結(jié)構(gòu)

Component Group是一個(gè)組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對(duì)象僅用于在編輯器左側(cè)面板中對(duì)組件進(jìn)行分組。例如，Widgets組件組只有兩個(gè)組件視頻和地圖，并被定義為如下

Component是一個(gè)對(duì)象，它提供可以在畫布上放置的html以及在選擇組件時(shí)可以編輯的屬性，例如Video Component，具有Url和Target屬性的html鏈接Component定義為：

在Component屬性集合中使用Input對(duì)象來(lái)編輯屬性，例如文本輸入，選擇，顏色，網(wǎng)格行等。例如，TextInput擴(kuò)展Input對(duì)象并定義為：

輸入還需要一個(gè)在編輯器html（在editor.html中）定義為 以上是借助瀏覽器翻譯工具，對(duì)官網(wǎng)的文檔進(jìn)行簡(jiǎn)單的翻譯，可能會(huì)有些不夠準(zhǔn)確的地方，感興趣的小伙伴可以直接查看相關(guān)文檔！

設(shè)計(jì)界面預(yù)覽

總結(jié)

VvvebJs是一個(gè)非常強(qiáng)大的網(wǎng)頁(yè)可視化生成構(gòu)建工具，讓不懂網(wǎng)頁(yè)設(shè)計(jì)的小伙伴們也能夠通過(guò)拖拽來(lái)生成美觀大方的網(wǎng)頁(yè)出來(lái)，讓設(shè)計(jì)網(wǎng)頁(yè)就像設(shè)計(jì)圖片一樣，VvvebJs特別適合展示型網(wǎng)頁(yè)，甚至可以不需要代碼就能完成一項(xiàng)復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)，總體來(lái)說(shuō)，VvvebJs是一個(gè)值得嘗試的工具！

原文來(lái)自：

北大青鳥(niǎo)java培訓(xùn)：7大優(yōu)秀的JavaScript庫(kù)？

現(xiàn)在有很多各種各樣的JavaScript庫(kù)，但這里將介紹7個(gè)很優(yōu)秀的可用于你下一個(gè)JavaScript項(xiàng)目的庫(kù)。

儀表盤是用于目標(biāo)或業(yè)務(wù)流程的視覺(jué)指示工具，也用于切割雜亂無(wú)章的數(shù)據(jù)，從而分割出要點(diǎn)的重要工具。

它可幫助評(píng)估信息，并及時(shí)做出正確的決定。

實(shí)時(shí)可視化的儀表盤由圖標(biāo)、測(cè)繪圖、圖形符號(hào)，以及數(shù)據(jù)表格等組成。

目前有一些開(kāi)源或商業(yè)的庫(kù)用于創(chuàng)建儀表盤。

在本文中，我們將會(huì)展示一些可幫助創(chuàng)建美觀且可自定義的儀表盤的JavaScript庫(kù)。

1.Gridster.jsGridster是一個(gè)jQuery插件，可以從跨多個(gè)列的元素構(gòu)建直觀的可拖拽布局。

它可以讓你從網(wǎng)格中動(dòng)態(tài)添加或刪除小部件，甚至可以獲得一個(gè)具有所有小部件位置的對(duì)象的JavaScript數(shù)組，從而可以在以后使用這些數(shù)組來(lái)加載小部件。

2.angular-gridster這是一個(gè)用于AngularJS的格子狀小部件的實(shí)現(xiàn)。

它具有jQuerygridster插件等功能，也具有一些其他的功能。

它完全使用Angular指令重寫，還可以使用Angular的數(shù)據(jù)綁定功能。

3.gridstack.jsgridstack.js是一個(gè)用于小部件布局的jQuery插件，靈感來(lái)自gridster.js。

這是一個(gè)可拖放的多列網(wǎng)格，可讓你構(gòu)建可拖拽的響應(yīng)式Bootstrapv3的友好布局，它還適用于knockout.js,angular.js和觸摸設(shè)備。

4.jQueryGridlyGridly是一個(gè)jQuery插件，電腦培訓(xùn)建議可用于拖放以及在網(wǎng)格中調(diào)整大小。

5.PackeryPackery是一個(gè)JavaScript庫(kù)和jQuery插件，可用于生成無(wú)縫且可拖拽的布局。

它使用bin-packing算法來(lái)填充空隙。

它適合用于創(chuàng)建一個(gè)可拖拽的儀表盤和無(wú)縫的“磚石圖像畫廊”布局。

分享題目：jquery拖放,jquery 拖拽交換位置
文章網(wǎng)址：http://chinadenli.net/article10/dsgdedo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、移動(dòng)網(wǎng)站建設(shè)、虛擬主機(jī)、標(biāo)簽優(yōu)化、網(wǎng)頁(yè)設(shè)計(jì)公司、營(yíng)銷型網(wǎng)站建設(shè)

廣告

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