通過JQuery，JQueryUI和Jsplumb實(shí)現(xiàn)拖拽模塊
前言
由于時(shí)間的原因。這個(gè)demo只兼容IE8，IE9。其他瀏覽器暫時(shí)不支持。不過jsplumb本身是支持各種瀏覽器的。
寫這篇文章是因?yàn)槲以趯?shí)際開發(fā)中遇到一個(gè)需求，支持拖拽模塊到指定的容器里。并且每個(gè)模塊會(huì)有自己的output 和input。開始覺得很酷也很變態(tài)。經(jīng)過一段時(shí)間的調(diào)研，特把結(jié)果分享給大家。不足之處，敬請(qǐng)指正。
看了題目里的3個(gè)J。可能有的朋友覺得頭暈，需要這么多東東？我先逐一介紹一下。
第一個(gè)jquery是我們平時(shí)經(jīng)常使用的jquery 庫。它可以讓你用很少的代碼實(shí)現(xiàn)一些很酷的js功能（實(shí)際它封裝了很多js）。
第二個(gè)JQueryUI提供了一整套核心交互插件，UI部分用jQuery的風(fēng)格。靈活的造型，人性化設(shè)計(jì)的視覺效果?？梢蕴峁┮恍┏Ｓ玫暮莒诺墓δ?。比如。彈出窗，日歷，拖拽，折疊，日歷等等。更酷的他的css是可以定制的。我們可以根據(jù)自己想要的風(fēng)格很輕松的生成自己想要的樣式。直接替換theme就可以改變整個(gè)站點(diǎn)的風(fēng)格。很多人選擇jquery ui的更深一層原因是，它對(duì)各個(gè)瀏覽器兼容性很好，支持 IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+和Google Chrome。
在這里，我們會(huì)用到一個(gè)它其中的drag and drop（拖拽）功能。
具體請(qǐng)見http://jqueryui.com/
第三個(gè)Jsplumb 是一個(gè)允許里使用箭頭，線去連接UI上的元素的JS庫。目前的版本是1.3.8。已經(jīng)是一個(gè)成熟的產(chǎn)品，并且經(jīng)常更新。我當(dāng)時(shí)查到了很多類似的js庫。調(diào)研比較之后決定使用它。他的官方網(wǎng)站：http://jsplumb.org/jquery/demo.html
首先我還是說說需求。UI左邊是待拖拽的模塊。我從左邊把它拖拽到右邊的容器里。大概就是下圖描述的樣子。
左邊三個(gè)窗體。我們給他同一的class ，方便jquery來操作。
<div id="container"> <div id="mainContent"> <div id="sidebar"> Module List <div class="window" id=""> <strong>1</strong><br /> <br /> </div> <br /> <div class="window" id=""> <strong>2</strong><br /> <br /> </div> <div class="window" id=""> <strong>3</strong><br /> <br /> </div> </div> <div id="content"> <p>drop here!</p> </div> </div> </div
在頁面載入時(shí)，首先使用jquery ui里的draggable功能使得我們的3個(gè)窗體變?yōu)榭梢酝蟿?dòng)的。
因?yàn)樗麄冇泄餐腸lass “window”，我們可以這樣：
$(".window").draggable({
helper: "clone"
});
helper：clone的意思是我們只是拖出這個(gè)window的副本。如果不加這個(gè)屬性。我們就會(huì)把這個(gè)窗體拖走了。
上邊id為content的div就是我們要放置窗體的目標(biāo)容器。我們要把這個(gè)容器設(shè)置為droppable。就是標(biāo)記它為可以接受拽過來的window。
$("#content").droppable({});
當(dāng)content 被放入window的時(shí)候會(huì)觸發(fā)drop事件。我們?yōu)閐rop事件定義一個(gè)function。
下邊代碼中入?yún)⒌膗i就是當(dāng)前被drop進(jìn)容器的元素。這里我們做一個(gè)判斷，如果被放進(jìn)來的元素的class包含jq-draggable-outcontainer。也就是說，這個(gè)元素是我們從左邊siderbar拽過來的話。
首先判斷這個(gè)元素中的innerText。根據(jù)innerText的不同在右邊的窗體中render一個(gè)新的窗體。（這里使用innerText判斷是不嚴(yán)謹(jǐn)?shù)?，我只是做一個(gè)demo。為大家拋磚引玉）。
$("#content").droppable({
drop: function (event, ui) {
// debugger;
if (ui.draggable[0].className.indexOf("jq-draggable-outcontainer") > 0) {
var text = ui.draggable[0].innerText
switch (text) {
case "1":
$(this)
.find("p")
.append('<div class="window jq-draggable-incontainer" id="window1"><strong>1</strong><br /><br /></div><div style="height:100px;"></div>');
SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);
case "2":
$(this)
.find("p")
.append('<div class="window jq-draggable-incontainer" id="window2"><strong>2</strong><br /><br /></div><div style="height:100px;"></div>');
SBS.UI.Views.Plumb.AddEndpoints("window2", ["BottomCenter","BottomLeft"], ["TopCenter"]);
} break;
case "3":
$(this)
.find("p")
.after('<div class="window jq-draggable-incontainer" id="window3"><strong>3</strong><br /><br /></div>');
SBS.UI.Views.Plumb.AddEndpoints("window3", [], ["TopCenter", "TopLeft"]);
}
}
}
});
大家注意這個(gè)函數(shù)SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);它是封裝了jsplumb 為窗體加上輸入和輸出的功能。先不管它，一會(huì)我們?cè)俜治觥?/p>
現(xiàn)在我們?cè)囍蟿?dòng)一個(gè)窗體到右邊的容器?？梢钥吹綄?shí)際已經(jīng)在右邊創(chuàng)建了一個(gè)窗體。如下圖。
藍(lán)色的圓點(diǎn)就是我們剛才繪畫出來的一個(gè)output點(diǎn)。由于我們?cè)谏线叴a中指定了BottomCenter。所以這個(gè)點(diǎn)被畫在了windows底部的中間。
現(xiàn)在讓jsplumb是如何畫出來這個(gè)點(diǎn)，并且需要哪些初始化過程。
// <reference path="jquery-1.5.1-vsdoc.js" />
var SBS = SBS || {};
SBS.UI = SBS.UI || {};
SBS.UI.Views = SBS.UI.Views || {};
SBS.UI.Views.Plumb = {
init: function () {
jsPlumb.importDefaults({
// default drag options
DragOptions: { cursor: 'pointer', zIndex: 2000 },
// default to blue at one end and green at the other
EndpointStyles: [{ fillStyle: '#225588' }, { fillStyle: '#558822'}],
// blue endpoints 7 px; green endpoints 11.
Endpoints: [["Dot", { radius: 7}], ["Dot", { radius: 11}]],
// the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this
// case it returns the 'labelText' member that we set on each connection in the 'init' method below.
ConnectionOverlays: [
["Arrow", { location: 0.9}],
["Label", {
location: 0.1,
id: "label",
cssClass: "aLabel"
}]
]
});
var connectorPaintStyle = {
lineWidth: 5,
strokeStyle: "#deea18",
joinstyle: "round"
},
// .. and this is the hover style.
connectorHoverStyle = {
lineWidth: 7,
strokeStyle: "#2e2aF8"
};
sourceEndpoint = {
endpoint: "Dot",
paintStyle: { fillStyle: "#225588", radius: 7 },
isSource: true,
connector: ["Flowchart", { stub: 40}],
connectorStyle: connectorPaintStyle,
hoverPaintStyle: connectorHoverStyle,
connectorHoverStyle: connectorHoverStyle
};
targetEndpoint = {
endpoint: "Rectangle",
paintStyle: { fillStyle: "#558822", radius: 11 },
hoverPaintStyle: connectorHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true
};
jsPlumb.bind("jsPlumbConnection", function (connInfo, originalEvent) {
init(connInfo.connection);
});
jsPlumb.bind("click", function (conn, originalEvent) {
if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
jsPlumb.detach(conn);
});
},
AddEndpoints: function (toId, sourceAnchors, targetAnchors) {
var allSourceEndpoints = [], allTargetEndpoints = [];
for (var i = 0; i < sourceAnchors.length; i++) {
var sourceUUID = toId + sourceAnchors[i];
allSourceEndpoints.push(jsPlumb.addEndpoint(toId, sourceEndpoint, { anchor: sourceAnchors[i], uuid: sourceUUID }));
}
for (var j = 0; j < targetAnchors.length; j++) {
var targetUUID = toId + targetAnchors[j];
allTargetEndpoints.push(jsPlumb.addEndpoint(toId, targetEndpoint, { anchor: targetAnchors[j], uuid: targetUUID }));
}
}
}
//Page load events
$(document).ready(
function () {
//all JavaScript that needs to be call onPageLoad can be put here.
SBS.UI.Views.Plumb.init();
}
);
上邊的代碼是我寫的一個(gè)調(diào)用jsplumb的js類。init函數(shù)里初始化了圓點(diǎn)和連接的樣式。具體的我們可以查看它的api http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-8-all-js.html
我們主要看AddEndpoints 函數(shù)。它接收3個(gè)參數(shù)toId, sourceAnchors, targetAnchors。
toId就是我們要在哪個(gè)元素上加輸入和輸出的標(biāo)記。sourceAnchors就是輸出的點(diǎn)的集合，targetAnchors就是輸入的點(diǎn)的集合。遍歷這些點(diǎn)。并且調(diào)用jsplumb的方法
jsPlumb.addEndpoint()就可以把這幾個(gè)點(diǎn)畫到元素上去了。
基本的功能就完成了。但是我們新畫出來的window還不能拖拽。我們要指定這幾個(gè)window是可以拖拽的。
使用jquery里的draggable為其標(biāo)記。并指定可以拖拽的范圍（局限于我們的content容器）。如果想限制元素拖拽的范圍，只需要設(shè)置它的containment屬性。
$(".jq-draggable-incontainer").draggable({
containment: $( "#content" ).length ? "#content" : "document"
});
現(xiàn)在這幾個(gè)window可以拖拽了。并且可以使用箭頭來連接。
刷新元素
我發(fā)現(xiàn)當(dāng)我拖拽了window之后，那幾個(gè)點(diǎn)是不跟著走的。查了api找到了一個(gè)函數(shù)。 jsPlumb.repaintEverything();就是重新畫所有的東西。
我們可以把它放在droppable的drop事件的最后。
這個(gè)demo做的比較糙，因?yàn)橐彩浅醪秸{(diào)研階段。比如用戶拽了同一個(gè)window到右邊2次。就會(huì)出現(xiàn)錯(cuò)誤。因?yàn)閕d重復(fù)了。我們可以遍歷id或者把已經(jīng)創(chuàng)建的id存起來，來創(chuàng)建新的id。不過我做了一個(gè)偷懶的芳芳，也符合我本身的需求。就是一種類型的window只可以拽一次。第二次就不讓用戶拽了。Jquery提供了很好的實(shí)現(xiàn)。自動(dòng)彈回去的功能。
在頁面第一次加載時(shí)候，我先設(shè)置幾個(gè)bool值到data里。當(dāng)用戶拽了一個(gè)window一次之后，就把那revert值設(shè)置為true。
$(function () {
$('#tmpl1').data("revert", false);
$('#tmpl2').data("revert", false);
$('#tmpl3').data("revert", false);
。。。。}
case "1":
if ($('#tmpl1').data("revert") == true) {
$('#tmpl1').draggable({ revert: "valid" });
}
else {
$(this)
.find("p")
.append('<div class="window jq-draggable-incontainer" id="window1"><strong>1</strong><br /><br /></div><div style="height:100px;"></div>');
SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);
$('#tmpl1').data("revert", true);
} break;
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery熱氣球動(dòng)畫半透明背景的后臺(tái)登錄界面代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)熱氣球動(dòng)畫背景登錄框，適合用于后臺(tái)登陸界面設(shè)計(jì)，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jQuery 實(shí)現(xiàn)批量提交表格多行數(shù)據(jù)的方法
今天小編就為大家分享一篇jQuery 實(shí)現(xiàn)批量提交表格多行數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)圖片懸浮，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
下面這些知識(shí)都是開發(fā)過程中，經(jīng)常遇到的。所以整理了下，需要的朋友可以參考下。2009-12-12
jquery改變disabled的boolean狀態(tài)的三種方法
改變disabled的boolean狀態(tài)，下面為大家介紹三種比較不錯(cuò)的方法，大家可以參考下2013-12-12
setTimeout使用時(shí)會(huì)產(chǎn)生動(dòng)畫隊(duì)列，有可能是在chrome瀏覽器中窗口不處于最前端時(shí)動(dòng)畫的隊(duì)列產(chǎn)生積累，下面為大家介紹下詳細(xì)的解決方法2013-10-10
jQuery 1.5最新版本的改進(jìn)細(xì)節(jié)分析
jQuery 1.5 beta1出來了，從學(xué)習(xí)跟進(jìn)上來說，這一次已經(jīng)比較晚了（我竟然不知道1.5什么時(shí)候出的alpha，就這么beta了）。2011-01-01
jquery 鼠標(biāo)滑動(dòng)顯示詳情應(yīng)用示例
本文示例要為大家實(shí)現(xiàn)的效果是鼠標(biāo)滑動(dòng),顯示詳情，代碼很簡(jiǎn)潔，很適合學(xué)習(xí)2014-01-01
底部懸浮通欄可以關(guān)閉廣告位的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄撞繎腋⊥诳梢躁P(guān)閉廣告位的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
幻燈片帶網(wǎng)頁設(shè)計(jì)中的20個(gè)奇妙應(yīng)用示例小結(jié)
幻燈片效果在網(wǎng)站中的使用非常流行，使用幻燈片效果既能在有限的網(wǎng)頁空間內(nèi)展示更多的內(nèi)容，又能增強(qiáng)視覺趣味，網(wǎng)上眾多的幻燈片插件資源也使得幻燈片的實(shí)現(xiàn)變得十分簡(jiǎn)單2012-05-05