摘要：
模块的拖拽分为4步，写的很粗糙，给自己留个底。$.droppable;3.具体创建模块的时候要使用jsplumb插件创建模块，jsplumb可以实现连线的功能_acsd.pm.moduledrag=3.将模块HTML和ID内容记录下来，存到集合里边，并将集合编码入库TakeHtml:function{if{//添加_acsd.pm.elManager.ElInfoAdd;//转换json对象}elseif{//修改_acsd.pm.elManager.ElInfoEidit;//转换json对象}elseif//删除{_acsd.pm.elManager.ElInfoRemove;//转换json对象}varjsonElList=JSON.stringify;jsonElList=encodeURIComponent;_acsd.pm.appManager.APPHTMLUpdate;}-------------_acsd.pm.elManager={ElInfoAdd:function{_elList.push;//添加模块到集合中},ElInfoEidit:function{//编辑模块$.each;},ElInfoRemove:function{varisReturn=false;//移除位数$.each(_elList,function(i,val){if(!isReturn){if{//判断选中的模块编辑_elList.splice(i,1);isReturn=true;}}});if{$.each;}},ElTakeUpdate:function{$.each;varjsonElList=JSON.stringify;jsonElList=encodeURIComponent;_acsd.pm.appManager.APPHTMLUpdate;}}4.回显的时候将解码后得到的集合循序回显，//假设date是从数据库查出来编码后的数据//1》_elList=eval;$.each;//2》$.each(_elList,function(val,txt){//添加链接线，有连线的连线if(txt.optid!
模块的拖拽分为 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")); //初始化模块拖拽 都能拖拽