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 + '" οnmοuseup=\"_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")); //初始化模块拖拽  都能拖拽

 

转载于:https://www.cnblogs.com/pingping/archive/2013/04/09/3010693.html