首页 前端知识 jsPlumb开发教程(实现html5拖拽连线)

jsPlumb开发教程(实现html5拖拽连线)

2024-04-19 21:04:25 前端知识 前端哥 858 314 我要收藏

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)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5259.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!