您的位置:首页 > Web前端 > JQuery

jquery-ui + jsplubm 实现模块拖拽连线回显

2013-04-09 18:29 746 查看
模块的拖拽分为 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")); //初始化模块拖拽  都能拖拽
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: