jsplumb拖线_基于 jsPlumb 的流程图编辑器的实现 （二，连接线的操作）

连接线支持单击选中，backspace 和 delete 可删除；双击可以为连接线添加 label。

完整代码：

/**

* 单击删除连线

*

*/

clickLine:function(){

var that = this;

jsPlumb.bind("click", function (conn, originalEvent) {

if(!isNew){

return false;

}

// 取消上次延时未执行的方法

clearTimeout(lineTimes);

//执行延时

lineTimes = setTimeout(function(){

jsPlumb.repaintEverything();

var target = originalEvent.toElement;

var isOuter = target.getAttribute('class') ? true : false;

if(isOuter){

return false;

}

target.setAttribute('stroke','#409eff');

$(document).keydown(function(event){

event=event||window.event

if(event.keyCode==8 || event.keyCode==46){  //8--backspace;46--delete

jsPlumb.detach(conn);

return false;

}

})

},300);

});

return this;

},

/**

* 双击给线添加label

*

*/

dblclickLine:function(){

var that = this;

jsPlumb.bind("dblclick", function (conn, originalEvent) {

if(!isNew){

return false;

}

// 取消上次延时未执行的方法

clearTimeout(lineTimes );

//如果连接线有label，则获取焦点，如果没有，则添加。

var labelInfo = that.lineIsHasLabel(conn);

if(labelInfo.isHasLabel){

labelInfo.currentLabel.removeClass('label-blur').addClass('label-focus');

var oldText = labelInfo.currentLabel.children('.label-text').html();

var inputDom = $('')

set