【看完想不會都難的系列教程】- (3) JQuery+JQueryUI+Jsplumb 實現拖拽模塊，流程圖風格

先看效果.由于時間的原因。這個demo只兼容IE8，IE9。其他瀏覽器暫時不支持。不過jsplumb本身是支持各種瀏覽器的。

寫這篇文章是因為我在實際開發中遇到一個需求，支持拖拽模塊到指定的容器里。并且每個模塊會有自己的output 和input。開始覺得很酷也很變態。經過一段時間的調研，特把結果分享給大家。不足之處，敬請指正。

看了題目里的3個J。可能有的朋友覺得頭暈，需要這么多東東？我先逐一介紹一下。

第一個jquery是我們平時經常使用的jquery 庫。它可以讓你用很少的代碼實現一些很酷的js功能（實際它封裝了很多js）。

第二個JQueryUI提供了一整套核心交互插件，UI部分用jQuery的風格。靈活的造型，人性化設計的視覺效果。可以提供一些常用的很炫的功能。比如。彈出窗，日歷，拖拽，折疊，日歷等等。更酷的他的css是可以定制的。我們可以根據自己想要的風格很輕松的生成自己想要的樣式。直接替換theme就可以改變整個站點的風格。很多人選擇jquery ui的更深一層原因是，它對各個瀏覽器兼容性很好，支持 IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+和Google Chrome。

在這里，我們會用到一個它其中的drag and drop（拖拽）功能。

具體請見http://jqueryui.com/

第三個Jsplumb 是一個允許里使用箭頭，線去連接UI上的元素的JS庫。目前的版本是1.3.8。已經是一個成熟的產品，并且經常更新。我當時查到了很多類似的js庫。調研比較之后決定使用它。他的官方網站：http://jsplumb.org/jquery/demo.html

首先我還是說說需求。UI左邊是待拖拽的模塊。我從左邊把它拖拽到右邊的容器里。大概就是下圖描述的樣子。

左邊三個窗體。我們給他同一的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

在頁面載入時，首先使用jquery ui里的draggable功能使得我們的3個窗體變為可以拖動的。

因為他們有共同的class “window”，我們可以這樣：

   $(".window").draggable({
            helper: "clone"
        });

helper：clone的意思是我們只是拖出這個window的副本。如果不加這個屬性。我們就會把這個窗體拖走了。

上邊id為content的div就是我們要放置窗體的目標容器。我們要把這個容器設置為droppable。就是標記它為可以接受拽過來的window。

 $("#content").droppable({});

當content 被放入window的時候會觸發drop事件。我們為drop事件定義一個function。

下邊代碼中入參的ui就是當前被drop進容器的元素。這里我們做一個判斷，如果被放進來的元素的class包含jq-draggable-outcontainer。也就是說，這個元素是我們從左邊siderbar拽過來的話。

首先判斷這個元素中的innerText。根據innerText的不同在右邊的窗體中render一個新的窗體。（這里使用innerText判斷是不嚴謹的，我只是做一個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"]);
                    }
                }
            }
        });

大家注意這個函數SBS.UI.Views.Plumb.AddEndpoints("window1", ["BottomCenter"], []);它是封裝了jsplumb 為窗體加上輸入和輸出的功能。先不管它，一會我們再分析。

現在我們試著拖動一個窗體到右邊的容器。可以看到實際已經在右邊創建了一個窗體。如下圖。

藍色的圓點就是我們剛才繪畫出來的一個output點。由于我們在上邊代碼中指定了BottomCenter。所以這個點被畫在了windows底部的中間。

現在讓jsplumb是如何畫出來這個點，并且需要哪些初始化過程。

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

上邊的代碼是我寫的一個調用jsplumb的js類。init函數里初始化了圓點和連接的樣式。具體的我們可以查看它的api http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-8-all-js.html

我們主要看AddEndpoints 函數。它接收3個參數toId, sourceAnchors, targetAnchors。

toId就是我們要在哪個元素上加輸入和輸出的標記。sourceAnchors就是輸出的點的集合，targetAnchors就是輸入的點的集合。遍歷這些點。并且調用jsplumb的方法

jsPlumb.addEndpoint()就可以把這幾個點畫到元素上去了。

基本的功能就完成了。但是我們新畫出來的window還不能拖拽。我們要指定這幾個window是可以拖拽的。

使用jquery里的draggable為其標記。并指定可以拖拽的范圍（局限于我們的content容器）。如果想限制元素拖拽的范圍，只需要設置它的containment屬性。

   $(".jq-draggable-incontainer").draggable({
                containment: $( "#content" ).length ? "#content" : "document"
                });

現在這幾個window可以拖拽了。并且可以使用箭頭來連接。

刷新元素

我發現當我拖拽了window之后，那幾個點是不跟著走的。查了api找到了一個函數。 jsPlumb.repaintEverything();就是重新畫所有的東西。

我們可以把它放在droppable的drop事件的最后。

這個demo做的比較糙，因為也是初步調研階段。比如用戶拽了同一個window到右邊2次。就會出現錯誤。因為id重復了。我們可以遍歷id或者把已經創建的id存起來，來創建新的id。不過我做了一個偷懶的芳芳，也符合我本身的需求。就是一種類型的window只可以拽一次。第二次就不讓用戶拽了。Jquery提供了很好的實現。自動彈回去的功能。

在頁面第一次加載時候，我先設置幾個bool值到data里。當用戶拽了一個window一次之后，就把那revert值設置為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;

源碼下載

posted @ 2012-04-17 18:24 技術弟弟閱讀(50351) 評論(18) 收藏舉報

刷新頁面返回頂部

技術弟弟

【看完想不會都難的系列教程】- (3) JQuery+JQueryUI+Jsplumb 實現拖拽模塊，流程圖風格

公告