Module List

1







2





3






drop here!


在頁面載入時，首先使用jquery ui里的draggable功能使得我們的3個窗體變?yōu)榭梢酝蟿拥摹?/p>
因為他們有共同的class “window”，我們可以這樣：
$(".window").draggable({
helper: "clone"
});
helper：clone的意思是我們只是拖出這個window的副本。如果不加這個屬性。我們就會把這個窗體拖走了。
上邊id為content的div就是我們要放置窗體的目標容器。我們要把這個容器設(shè)置為droppable。就是標記它為可以接受拽過來的window。
$("#content").droppable({});
當content 被放入window的時候會觸發(fā)drop事件。我們?yōu)閐rop事件定義一個function。
下邊代碼中入?yún)⒌膗i就是當前被drop進容器的元素。這里我們做一個判斷，如果被放進來的元素的class包含jq-draggable-outcontainer。也就是說，這個元素是我們從左邊siderbar拽過來的話。
首先判斷這個元素中的innerText。根據(jù)innerText的不同在右邊的窗體中render一個新的窗體。（這里使用innerText判斷是不嚴謹?shù)?，我只是做一個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('
1

');
SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);
case "2":
$(this)
.find("p")
.append('
2

');
SBS.UI.Views.Plumb.AddEndpoints("window2", ["BottomCenter","BottomLeft"], ["TopCenter"]);
} break;
case "3":
$(this)
.find("p")
.after('
3

');
SBS.UI.Views.Plumb.AddEndpoints("window3", [], ["TopCenter", "TopLeft"]);
}
}
}
});
大家注意這個函數(shù)SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);它是封裝了jsplumb 為窗體加上輸入和輸出的功能。先不管它，一會我們再分析。
現(xiàn)在我們試著拖動一個窗體到右邊的容器。可以看到實際已經(jīng)在右邊創(chuàng)建了一個窗體。如下圖。
藍色的圓點就是我們剛才繪畫出來的一個output點。由于我們在上邊代碼中指定了BottomCenter。所以這個點被畫在了windows底部的中間。
現(xiàn)在讓jsplumb是如何畫出來這個點，并且需要哪些初始化過程。
// 
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();
}
);
上邊的代碼是我寫的一個調(diào)用jsplumb的js類。init函數(shù)里初始化了圓點和連接的樣式。具體的我們可以查看它的api http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-8-all-js.html
我們主要看AddEndpoints 函數(shù)。它接收3個參數(shù)toId, sourceAnchors, targetAnchors。
toId就是我們要在哪個元素上加輸入和輸出的標記。sourceAnchors就是輸出的點的集合，targetAnchors就是輸入的點的集合。遍歷這些點。并且調(diào)用jsplumb的方法
jsPlumb.addEndpoint()就可以把這幾個點畫到元素上去了。
基本的功能就完成了。但是我們新畫出來的window還不能拖拽。我們要指定這幾個window是可以拖拽的。
使用jquery里的draggable為其標記。并指定可以拖拽的范圍（局限于我們的content容器）。如果想限制元素拖拽的范圍，只需要設(shè)置它的containment屬性。
$(".jq-draggable-incontainer").draggable({
containment: $( "#content" ).length ? "#content" : "document"
});
現(xiàn)在這幾個window可以拖拽了。并且可以使用箭頭來連接。
刷新元素
我發(fā)現(xiàn)當我拖拽了window之后，那幾個點是不跟著走的。查了api找到了一個函數(shù)。 jsPlumb.repaintEverything();就是重新畫所有的東西。
我們可以把它放在droppable的drop事件的最后。
這個demo做的比較糙，因為也是初步調(diào)研階段。比如用戶拽了同一個window到右邊2次。就會出現(xiàn)錯誤。因為id重復(fù)了。我們可以遍歷id或者把已經(jīng)創(chuàng)建的id存起來，來創(chuàng)建新的id。不過我做了一個偷懶的芳芳，也符合我本身的需求。就是一種類型的window只可以拽一次。第二次就不讓用戶拽了。Jquery提供了很好的實現(xiàn)。自動彈回去的功能。
在頁面第一次加載時候，我先設(shè)置幾個bool值到data里。當用戶拽了一個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('
1

');
SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);
$('#tmpl1').data("revert", true);
} break;
源碼下載
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
            
            
                        

            本文名稱：通過JQuery，JQueryUI和Jsplumb實現(xiàn)拖拽模塊            

            文章網(wǎng)址：http://weahome.cn/article/gchjcj.html