jsPlumb开发教程（实现html5拖拽连线）

jsPlumb基础教程目录

• 基本介绍
• • API介绍
  • • 连接两个节点
    • 可拖动节点
    • 给连接加上箭头
    • 增加一个端点
    • 拖动端点连线
    • 给链接添加点击事件：点击删除连线
    • 指定端点连接
    • 一个端点拖拽出多条连线

基本介绍

简单介绍下jsplumb的一些用法，详细介绍移步jsplumb 中文基础教程。

源节点：Souce
目标节点：Target
锚点：Anchor
端点：Endpoint
连接：Connector

API介绍

连接两个节点

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="margin-left:50px;"></div>
  </div>
  <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
 
  <script>
    jsPlumb.ready(function () {
      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Dot'
      })
    })
  </script>
 复制

可拖动节点

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="left:150px;"></div>
  </div>
  <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
 
  <script>
    jsPlumb.ready(function () {
      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Rectangle'
      })
 
      jsPlumb.draggable('item_left')
      jsPlumb.draggable('item_right')
    })
  </script>
 复制

给连接加上箭头

箭头实际上是通过设置overlays或者connectorOverlays去设置的，可以设置箭头的长宽以及箭头的位置，location 0.5表示箭头位于中间，location 1表示箭头设置在连线末端。 一根连线是可以添加多个箭头的。
一个可配置的箭头：Arrow
标签，可以在链接上显示文字信息：Label
原始类型的箭头：PlainArrow
菱形箭头：Diamond
自定义类型：Custom

jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
  overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]
}, common)
 复制

增加一个端点

addEndpoint方法可以用来增加端点

jsPlumb.ready(function () {
      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
      })
    })
 复制

拖动端点连线

如果你将isSource和isTarget设置成true，那么就可以用户在拖动时，自动创建链接。

jsPlumb.ready(function () {
      jsPlumb.setContainer('diagramContainer')
 
      var common = {
        isSource: true,
        isTarget: true,
        connector: ['Straight']
      }
 
      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
      }, common)
 
      jsPlumb.addEndpoint('item_right', {
        anchor: 'Left'
      }, common)
 
      jsPlumb.addEndpoint('item_right', {
        anchor: 'Right'
      }, common)
    })
 复制

一般来说拖动创建的链接，可以再次拖动，让链接断开。如果不想触发这种行为，可以设置

jsPlumb.importDefaults({
    ConnectionsDetachable: false
  })
 复制

给链接添加点击事件：点击删除连线

// 请单点击一下连接线, 
jsPlumb.bind('click', function (conn, originalEvent) {
  if (window.prompt('确定删除所点击的链接吗？ 输入1确定') === '1') {
   		 jsPlumb.detach(conn)
  }
})
 复制

jsPlumb支持许多事件，如下：
connection
connectionDetached
connectionMoved
click
dblclick
endpointClick
endpointDblClick
contextmenu
beforeDrop
beforeDetach
zoom
Connection Events
Endpoint Events
Overlay Events
Unbinding Events

指定端点连接

初始化数据后，给节点加上了endPoint, 如果想编码让endPoint连接上。需要在addEndpoint方法时，就给该断点加上一个uuid, 然后通过connect()方法，将两个断点链接上。建议使用node-uuid给每个断点都加上唯一的uuid， 这样链接就方便多了。

jsPlumb.addEndpoint('item_left', {
  anchors: ['Right'],
  uuid: 'fromId'
})
 
jsPlumb.addEndpoint('item_right', {
  anchors: ['Left'],
  uuid: 'toId'
})
 
console.log('3 秒后建立连线')
setTimeout(function () {
  jsPlumb.connect({ uuids: ['fromId', 'toId'] })
}, 3000)
 复制

一个端点拖拽出多条连线

默认情况下，maxConnections的值是1，也就是一个端点最多只能拉出一条连线。
你也可以设置成其他值，例如5，表示最多可以有5条连线。
如果你想不限制连线的数量，那么可以将该值设置为-1。

var common = {
  isSource: true,
  isTarget: true,
  connector: ['Straight'],
  maxConnections: -1
}
 
jsPlumb.addEndpoint('item_left', {
  anchors: ['Right']
}, common)
 复制