Shulou(Shulou.com)06/01 Report--

Editor to share with you how vue3.x uses jsplumb to achieve drag-and-drop connection, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

The details are as follows

If you want to use jsplumb in vue2, you can view the article. Here's how to use jsplumb to drag and drop connections in vue3.x.

1. Installation

Npm install-save jsplumb

2. Introduction

Import {ref, reactive,onMounted} from 'vue' import jsPlumb from' jsplumb'

3. Use

Jsplumb uses {{item.name}} {{item.name}} import {ref, reactive,onMounted} from 'vue' import jsPlumb from' jsplumb' / / jsplumb uses let $jsPlumb = jsPlumb.jsPlumb; let jsPlumb_instance = null / cache the instantiated jsplumb object / / Model axis const list1 = reactive ([{name: "name1", nodeId: "name1", axis:', type:''}, {name: "name2", nodeId: "name2", axis:', type:''}, {name: "name3", nodeId: "name3", axis:', type:''}) {name: "name4", nodeId: "name4", axis:', type:''}, {name: "name5", nodeId: "name5", axis:', type:''}, {name: "name6", nodeId: "name6", axis:', type:''}]) / / API data point const list2 = reactive ([{name: 'data 1, nodeId:' data1'}, {name: 'data 2, nodeId:' data2'}, {name: 'data 3, nodeId:' data3'}, {name: 'data 4, nodeId:' data4'}, {name: 'data 5, nodeId:' data5'} {name: 'data 6 minutes, nodeId:' data6'}]) OnMounted (() = > {showPlumb () }) const showPlumb = () = > {jsPlumb_instance = $jsPlumb.getInstance ({Container: 'container', / / selector id EndpointStyle: {radius: 0.11, fill:' # fff'}, / / end style PaintStyle: {stroke:'# 000 styles, strokeWidth: 2}, / / painting style Default 8px lineweight # 456 HoverPaintStyle: {stroke:'# 1E90FF'}, / / default hover style defaults to null ConnectionOverlays: [/ / all arrowheads can be styled here, because we want to change the style of the connector. Therefore, if you configure ['Arrow', {/ /] separately, please refer to the Chinese documents location: 1, length: 10, paintStyle: {stroke:' # 000' Fill:'# 000'}}]], Connector: ['Straight'], / / Type of default connector to be used: straight line DrapOptions: {cursor: 'crosshair', zIndex: 2000}},) console.log (jsPlumb_instance) jsPlumb_instance.batch (() = > {for (let I = 0) I

< list1.length; i++) { initLeaf(list1[i].nodeId, 'joint') } for (let i = 0; i < list2.length; i++) { initLeaf(list2[i].nodeId, 'data') } }) const joint = document.getElementsByName('joint') const data = document.getElementsByName('data') jsPlumb_instance.setSourceEnabled(joint, true) jsPlumb_instance.setTargetEnabled(data, true) jsPlumb_instance.setDraggable(joint, false) // 是否支持拖拽 jsPlumb_instance.setDraggable(data, false) // 是否支持拖拽 jsPlumb_instance.bind('click', (conn, originalEvent) =>

{jsPlumb_instance.deleteConnection (conn)})} / / initialize specific nodes const initLeaf = (id, type) = > {const ins = jsPlumb_instance Const elem = document.getElementById (id) if (type = = 'joint') {ins.makeSource (elem, {anchor: [1,0.5,0,0], / / left upper and lower right allowLoopback: false, maxConnections: 1})} else {ins.makeTarget (elem {anchor: [0,0.5,0,0], allowLoopback: false, maxConnections: 1} # container {position: relative Margin-top: 20px; width: 100%; height: 300px;} .col2, .col1 {float: left; text-align: center;} .col1 {width: 80px;} .col2 {width: 120px; margin-left: 80px;} # container > div > div {line-height: 30px; margin: 00 17px 0; background: # ef631e; color: # fff } the above is all the content of the article "how to use jsplumb for drag-and-drop connection in vue3.x". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.