jquery-ui + jsplubm 實現模塊拖拽連線回顯

模塊的拖拽分為 4步，寫的很粗糙，給自己留個底。
var _elList =[];存模塊的集合

1. jquery-ui 實現拖拽

  $("#workflow_app_outer .tool").draggable({  //增加拖拽功能
        helper: "clone",
        zIndex: 100,
        appendTo: "#workflow_app",
        start: function (event, ui) {
        },
        stop: function (event, ui) {
        }
    });

2. 拖拽目標位置后創建模塊。

$("#workflow_app").droppable({  //拖拽到目標容易后觸發
        accept: '#workflow_app_outer .tool',
        hoverClass: 'modelhover',
        drop: function (event, ui) {
            _acsd.pm.moduledrag.addShape({  //調用創建模塊的方法
                skin: ui.draggable.attr("vskin"),
                html: ui.draggable.attr("vhtml"),
                type: ui.draggable.attr("vtype"),
                position: ui.position,
                target: $(this)
            });
        }
    });

3. 具體創建模塊的時候要使用jsplumb插件創建模塊，jsplumb可以實現連線的功能

_acsd.pm.moduledrag = (function ($, window) {
 return {
addShape: function (_opt) {
            var opt = $.extend(true, {}, {
                id: guidGenerator(),
                skin: "",
                html: "",
                type: "0",
                position: {
                    top: 0,
                    left: 0
                },
                target: $(document.body)
            }, _opt); 

            var _el = $('<div class="' + opt.skin + ' proc_l pingping con_po1 b_p1 b_p1c"  id="' + opt.id + '" onmouseup=\"_acsd.pm.appManager.TakeHtml(0,this)\" ></div>');
          
            opt.target.append(_el.css({  //將鼠標的當前位置交給新創建的模塊（div）的位置
                "top": opt.position.top,
                "left": opt.position.left
            }).find(".m_close1").click(function () {
                // _acsd.pm.moduledrag.delShape(opt.id, moudleid);    //關閉
            }).end());
            _acsd.pm.wfCommon.plumb.AddEndpoints(opt.id, ["RightMiddle"], ["LeftMiddle"]);  //添加連線必備的點
            jsPlumb.draggable(_el);  //關鍵作用，這句才能使模塊移動 
            _acsd.pm.appManager.TakeHtml(1, _el[0]); //操作模塊屬性，從這兒移到第3步》》》》》》
            
        }
 }
}）

3. 將模塊HTML和ID內容記錄下來，存到集合里邊，並將集合編碼入庫

 TakeHtml: function (type, apphtml) {
        if (type == 1) {  //添加
            _acsd.pm.elManager.ElInfoAdd(apphtml.id, apphtml.outerHTML); //轉換json對象 
        }
        else if (type == 0) {  //修改
            _acsd.pm.elManager.ElInfoEidit(apphtml.id, apphtml.outerHTML); //轉換json對象 
        }
        else if (type == 2)  //刪除
        {
            _acsd.pm.elManager.ElInfoRemove(apphtml); //轉換json對象 
        }
        var jsonElList = JSON.stringify(_elList);
        jsonElList = encodeURIComponent(jsonElList);
        _acsd.pm.appManager.APPHTMLUpdate(_acsd.property.getAppid(), jsonElList);
    }
-------------

_acsd.pm.elManager = {
    ElInfoAdd: function (optid, opthtml) {
        _elList.push({ optid: optid, opthtml: opthtml, connid: "" }); //添加模塊到集合中
    },
    ElInfoEidit: function (optid, opthtml) {  //編輯模塊
        $.each(_elList, function (i, val) {
            if (val.optid == optid) {        //判斷選中的模塊編輯
                val.opthtml = opthtml;
            }
        });
    },
    ElInfoRemove: function (optid) {
        var isReturn = false; //移除位數 
        $.each(_elList, function (i, val) {
            if (!isReturn) {
                if (val.optid == optid) {        //判斷選中的模塊編輯
                    _elList.splice(i, 1);
                    isReturn = true;
                }
            }
        });
        if (isReturn) {
            $.each(_elList, function (i, val) {
                if (val.connid == optid) {
                    val.connid = "";
                }
            });
        }
    },
    ElTakeUpdate: function (id) {
        $.each(_elList, function (i, val) {
            if (val.optid == id) {
                val.opthtml = $("#" + id)[0].outerHTML;
            }
        });
        var jsonElList = JSON.stringify(_elList);
        jsonElList = encodeURIComponent(jsonElList);
        _acsd.pm.appManager.APPHTMLUpdate(_acsd.property.getAppid(), jsonElList);
    }
}

4. 回顯的時候將解碼后得到的集合循序回顯，

 //假設date是從數據庫查出來編碼后的數據
  //1》
_elList = eval(date);   
$.each(_elList, function (val, txt) {
              $("#workflow_app").append(txt.opthtml); //開始順序回顯模塊
              _acsd.pm.wfCommon.plumb.AddEndpoints(txt.optid, ["RightMiddle"], ["LeftMiddle"]); //為每個模塊添加上下鏈接需要的點
          });
//2》
 $.each(_elList, function (val, txt) {//添加鏈接線，有連線的連線
              if (txt.optid != "" && txt.connid != "") {
                  jsPlumb.connect({ uuids: [txt.optid + "RightMiddle", txt.connid + "LeftMiddle"], editable: true });
              }
          });

//3》
jsPlumb.draggable(jsPlumb.getSelector(".pingping")); //初始化模塊拖拽  都能拖拽