JsPlumb+vue 实现拖拽连线,点击删除连线节点

JsPlumb 实现拖拽连线,点击删除连线,点击删除节点标题


参考网上的代码写的练习
实现的功能
拖拽连线: 设置静态端点,端点自带拖拽连线的功能
点击连线删除该连线:plumbIns.deleteConnection(conn);
点击dom删除其自身包括节点和连线

因为用到dom,在mounted()里面写

百度出来的有些函数已经废弃了,最好使用的时候直接console.log(jsPlumb)看有什么内置函数

jsPlumb 里面的内置删除函数

  1. deleteConnection: ƒ (connection, params)
  2. deleteConnectionsForElement: ƒ (el, params)
  3. deleteEndpoint: ƒ (object, dontUpdateHover, deleteAttachedObjects)
  4. deleteEveryConnection: ƒ (params)
  5. deleteEveryEndpoint: ƒ ()
  6. deleteObject: ƒ (params)

完整代码如下



<script>
import {
      jsPlumb } from 'jsplumb'
export default {
     
  name: 'learnJsplumb',
  mounted() {
     
    let plumbIns = jsPlumb.getInstance()
    plumbIns.ready(function () {
     
      var common = {
       //设置端点样式
        isSource: true,
        isTarget: true,
        connector: ['Flowchart', {
      cornerRadius: 5 }],//连接器使用流程图外观 设置样式
        // overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ], 而在addEndpoint方法中,不能使用overlays,需要使用connectOverlays
        endpoint: 'Dot',
        paintStyle: {
       //通过设置各种 *Style来改变链接或者端点的样式 //连接器外观
          fill: '#316b31',
          //   stroke:'#316b31',
          strokeWidth: 2
        },
        // hoverPaintStyle: {
     
        //   outlineStroke: 'lightblue'
        // }, //端点被选中时的样式
        connectorStyle: {
     
          outlineStroke: 'green',
          strokeWidth: 1
        },
        connectorHoverStyle: {
     
          strokeWidth: 2,
          outlineStroke: 'rgb(245, 79, 28)',
        } //连接线选中时的样式
      }
        //添加端点,端点可连线, anchors位置,connectorOverlays配置连接线样式
       plumbIns.addEndpoint('state1', {
      
        anchors: ['Bottom'], connectorOverlays: [
          ["Arrow", {
      width: 10, length: 10, location: 0.5, id: "arrow" }],
        ],
      }, common)

       plumbIns.addEndpoint('state2', {
     
        anchor: 'Bottom', connectorOverlays: [
          ["Arrow", {
      width: 10, length: 10, location: 0.5, id: "arrow" }],
        ],
      }, common)
      plumbIns.addEndpoint('state2', {
     
        anchor: 'Top', connectorOverlays: [
          ["Arrow", {
      width: 10, length: 10, location: 0.5, id: "arrow" }],
        ],
      }, common)

      plumbIns.addEndpoint('state3', {
     
        anchor: 'Top', connectorOverlays: [
          ["Arrow", {
      width: 10, length: 10, location: 0.5, id: "arrow" }],
        ],
      }, common)
      //设置节点可拖拽
      plumbIns.draggable('state1') 
      plumbIns.draggable('state2')
      plumbIns.draggable('state3')
      //点击删除连接线
      plumbIns.bind('click', function (conn, originalEvent) {
     
        plumbIns.deleteConnection(conn); 
      })
      //点击删除dom
      for (let i of document.querySelectorAll('.item')) {
     
        i.addEventListener("click", function () {
     
          plumbIns.deleteConnectionsForElement(i.id)
          plumbIns.removeAllEndpoints(i.id);//删除divID所有端点
          //   i.style.display = 'none'
          plumbIns.remove(i.id);//移除节点
        });
      }
    })
  }
}
</script>

样式

#content {
     
  margin: 50px;
  position: relative;
  background: #efefef;
  width: 800px;
  height: 800px;
}
.item {
     
  border-radius: 4px;
  background-color: #ddddff;
  text-align: center;
  line-height: 40px;
  width: 100px;
  height: 40px;
  position: absolute;
  color: #fff;
}
#state1 {
     
  background-color: rgb(65, 163, 70);
  left: 100px;
  top: 100px;
}
#state2 {
     
  left: 100px;
  top: 250px;
}
#state3 {
     
  background-color: rgb(245, 79, 28);
  left: 300px;
  t

你可能感兴趣的:(vue.js,javascript)