参考 https://www.jianshu.com/p/c2c4f7fdffa1
jsPlumb支持绑定到Connections,Endpoints和Overlays上的几个不同事件,以及jsPlumb对象本身。
jsPlumb事件
要在jsPlumb本身(或jsPlumb实例)上绑定事件,请使用jsPlumb.bind(event, callback)
jsPlumb.bind("connection", function(info) {
.. update your model in here, maybe.
});
可以在jsPlumb类上绑定的事件:
connection(info, originalEvent)- 通知连接建立
info具有的属性:
connection
: 新连接,可以注册监听sourceId
: 连接的源元素idtargetId
: 连接的目标元素idsource
: 连接的源元素target
: 连接的目标元素sourceEndpoint
: 连接的源端点targetEndpoint
: 连接的目标端点
originalEvent:建立连接的原始鼠标事件。
注: jsPlumb.connect或者鼠标连线时触发此事件
connectionDetached(info,originalEvent)- 通知连接断开
info具有的属性:
-
connection
: 已分离的连接 -
sourceId
: 分离之前连接的源元素id -
targetId
: 分离之前连接的目标元素id -
source
: 分离之前连接的源元素 -
target
: 分离之前连接的目标元素 -
sourceEndpoint
: 分离之前连接的源端点 -
targetEndpoint
: 分离之前连接的目标端点
连接到某个节点之前放弃新拖动的Connection时不会触发此事件,可以使用connectionAborted捕获。
originalEvent:断开连接的原始鼠标事件。
connectionMoved(info,originalEvent)- 通知已将现有连接的源或目标端点拖动到某个新位置
info具有的属性:
-
index
: 源端点为0,目标端点为1 -
originalSourceId
: 移动前连接的源元素id -
newSourceId
: 移动后连接的源元素id -
originalTargetId
: 移动前连接的目标元素id -
newTargetId
: 移动后连接的目标元素id -
originalSourceEndpoint
: 移动前的源端点 -
newSourceEndpoint
: 移动后的源端点 -
originalTargetEndpoint
: 移动前的目标端点 -
newTargetEndpoint
: 移动后的目标端点
connectionAborted(connection,originalEvent)在连接到端点或目标元素之前放弃拖动连接时触发
connectionDrag(connection)- 正在拖动现有连接
注:当此事件触发时,连接的目标端点是jsPlumb用于拖动的瞬态元素,随后在建立或中止连接时将从DOM中删除。
connectionDragStop(connection)- 连接拖动结束
click(connection, originalEvent)- 单击连接
dblclick(connection, originalEvent)- 双击连接
endpointClick(connection, originalEvent)- 单击端点
endpointDblClick(connection, originalEvent)- 双击端点
contextmenu(connection, originalEvent)- 右键单击某个给定组件jsPlumb将报告对Connections和Endpoints的右键单击
beforeDrop(info)- 删除新连接或现有连接时触发此事件
info具有的属性:
-
index
: 源端点为0,目标端点为1 -
sourceId
: 连接的源元素id -
targetId
: 连接的目标元素id -
scope
: 连接的范围 -
connection
: 实际的Connection对象。可以访问Connection中的“端点”数组,以获取连接中涉及的端点,但注意,在拖动连接时,目标端点将始终是仅在拖动的生命周期内存在的瞬态端点。要获取正在删除的连接端点,请使用dropEndpoint。 -
dropEndpoint
: 这是删除连接的实际端点。可能为null,因为如果在已调用makeTarget的元素上删除Connection,则不会设置它 -
targetEndpoint
: 分离之前Connection中的目标端点
beforeDetach(connection)- 断开连接时触发此事件。connection参数为刚断开的Connection。如果此拦截器返回false将会中止连接断开。
beforeDrag(connection)- 开始拖动新连接时触发此事件。
-
endpoint
: 拖动连接的端点 -
source
: 端点所属的源 -
sourceId
: 端点所属的源ID
beforeDrag
与其他拦截器的操作略有不同:从拦截器函数返回false将取消当前拖动,也可以从拦截器返回一个对象,此对象将作为data
被传进新连接的构造函数中:
jsPlumbInstance.bind("beforeDrag", function(params) {
return {
foo:"bar"
}
});
如果已定义参数化连接类型,此功能特别有用。使用此机制,可以使用选择的数据填充新拖动的连接。
注: 1.7.6之前的所有jsPlumb版本,新的连接拖动以及拖动现有的连接都会触发beforeDetach。从1.7.6开始,后一种行为已被移至 beforeStartDetach拦截器。
beforeStartDetach(connection)- 开始拖动现有连接时触发此事件。
-
endpoint
: 拖动连接的端点 -
source
: 端点所属的源 -
sourceId
: 端点所属的源ID -
connection
: 即将被拖动的连接
返回false,取消拖动。
连接事件
绑定到Connection上的事件,还可以使用以下bind方法:
var connection = jsPlumb.connect({source:"d1", target:"d2"});
connection.bind("click", function(conn) {
console.log("you clicked on ", conn);
});
这些是可以绑定到连线事件:
click(connection, originalEvent)
- 单击连接。dblclick(connection, originalEvent)
- 双击连接。contextmenu(connection, originalEvent)
- 右键单击连线。mouseover(connection, originalEvent)
- 鼠标放在连线上。mouseout(connection, originalEvent)
- 鼠标移出连线。mousedown(connection, originalEvent)
- 连接上的鼠标按钮被按下。mouseup(connection, originalEvent)
- 连接上的鼠标按钮被释放。
端点事件
绑定到端点上的事件,使用以下bind方法:
var endpoint = jsPlumb.addEndpoint("d1", { someOptions } );
endpoint.bind("click", function(endpoint) {
console.log("you clicked on ", endpoint);
});
这些是可以绑定到端点的事件:
click(endpoint, originalEvent)
- 单击端点。dblclick(endpoint, originalEvent)
- 双击端点。contextmenu(endpoint, originalEvent)
- 右键单击端点。mouseover(endpoint, originalEvent)
- 鼠标放在端点上。mouseout(endpoint, originalEvent)
- 鼠标移出端点。mousedown(endpoint, originalEvent)
- 端点上的鼠标按钮被按下。mouseup(endpoint, originalEvent)
- 端点上鼠标按钮被释放。-
maxConnections(info, originalEvent)
- 在已具有最大连接数的端点上删除连接。
info具有的属性:- endpoint:删除连线的端点
- connection:删除的连接
- maxConnections:端点的maxConnections值
覆盖事件
在Overlay上注册事件侦听器是一个稍微不同的过程 - 将它们作为Overlay构造函数的参数。
以下是在Overlay上注册点击监听器的方法:
jsPlumb.connect({
source:"el1",
target:"el2",
overlays:[
[ "Label", {
events:{
click:function(labelOverlay, originalEvent) {
console.log("click on label overlay for :" + labelOverlay.component);
}
}
}],
[ "Diamond", {
events:{
dblclick:function(diamondOverlay, originalEvent) {
console.log("double click on diamond overlay for : " + diamondOverlay.component);
}
}
}]
]
});
解除绑定事件
在jsPlumb对象以及Connections和Endpoints上,可以使用unbind方法删除监听器。
//取消绑定事件
jsPlumb.unbind("click");
或者
//解除所有事件
var e = jsPlumb.addEndpoint("someDiv");
e.bind("click", function() { ... });
e.bind("dblclick", function() { ... });
...
e.unbind("click");