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")); //初始化模块拖拽 都能拖拽