wans

src/router/generator-platform-routers.js

@@ -447,7 +447,7 @@ const constantRouterComponents = {
   'IdleAssetsRepairMap': () => import('@/views/idle-assets-map/IdleAssetsRepairMap.vue'),
   'SbPositionImg': () => import('@/views/sb-position/SbPositionImg.vue'),
   // test
-  'Test1': () => import('@/views/test/Test1.vue'),
+  'Test': () => import('@/views/test/Test1.vue'),
   // 自定义
   'CustomForm': () => import('@/views/custom/form/CustomForm.vue'),
   // threeJs

src/views/test/Test1.vue

@@ -9,7 +9,7 @@
 // import jsPlumb from 'jsplumb'
 import Vue from 'vue'
 import Node from './modules/Node.vue'
-import { ready, newInstance, EVENT_CONNECTION, EVENT_CONNECTION_DBL_CLICK } from '@jsplumb/browser-ui'
+import { ready, newInstance, EVENT_CONNECTION, EVENT_CONNECTION_DBL_CLICK, EVENT_DRAG_STOP } from '@jsplumb/browser-ui'
 export default {
   components: {
     Node,
@@ -21,12 +21,28 @@ export default {
       details: [
         {
           name: 'node1',
+          x: 400,
+          y: 40,
+          children: [
+            {
+              name: 'node2',
+            },
+            {
+              name: 'node3',
+            },
+          ],
         },
         {
+          x: 100,
+          y: 320,
           name: 'node2',
+          children: [],
         },
         {
+          x: 660,
+          y: 320,
           name: 'node3',
+          children: [],
         },
       ],
     }
@@ -47,7 +63,6 @@ export default {
           grid: { w: 20, h: 20 },
         },
       })
-      console.log()
       instance.importDefaults({
         anchor: 'Continuous',
         connectionsDetachable: false,
@@ -87,7 +102,6 @@ export default {
       })
       instance.addSourceSelector('.bottom')
       instance.addTargetSelector('.top')
-      console.log(this.$refs)
       this.$refs.node.forEach((item) => {
         instance.addEndpoint(item.$el, { target: true, source: true })
       })
@@ -117,6 +131,11 @@ export default {
       //     { type: 'Arrow', options: { location: 1 } },
       //   ],
       // })
+      instance.bind(EVENT_DRAG_STOP, (val) => {
+        console.log(val.el.__vue__)
+        console.log(3)
+        val.el.__vue__.setPosition(val.elements[0].pos)
+      })
       // 建立链接
       instance.bind(EVENT_CONNECTION, (val) => {
         console.log(val)

src/views/test/modules/Node.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="node">
+  <div class="node" :style="{left:detail.x+'px',top:detail.y+'px'}">
     <div class="top"></div>
     <div class="bottom"></div>
     {{ detail.name }}
@@ -7,6 +7,7 @@
 </template>
 
 <script>
+import { log } from '@jsplumb/browser-ui'
 export default {
   props: {
     detail: {
@@ -17,13 +18,19 @@ export default {
   data() {
     return {}
   },
+  methods: {
+    setPosition(position) {
+      this.detail.x = position.x
+      this.detail.y = position.y
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .node {
-  width: 300px;
-  height: 200px;
+  width: 200px;
+  height: 100px;
   position: absolute;
   background: #fff;
   .top {