fixed dragging

canvas-10-feb/src/components/NodesLayer.vue

@@ -9,6 +9,7 @@
           :id="nodeid"
         ></textarea>
       </div>
+
       <p>markdown supported</p>
       <button>delete</button>
     </form>

canvas-10-feb/src/components/mixins/drag.js

 export const drag = {
   methods: {
-    makeDraggable(nodes) {
+    makeDraggable(incoming) {
       var active = false
       var currentX
       var currentY
@@ -9,15 +9,15 @@ export const drag = {
       var xOffset = 0
       var yOffset = 0
 
-      nodes.addEventListener('mousedown', startDrag)
-      nodes.addEventListener('mousemove', drag)
-      nodes.addEventListener('mouseup', endDrag)
-      nodes.addEventListener('mouseleave', endDrag)
-      nodes.addEventListener('touchstart', startDrag)
-      nodes.addEventListener('touchmove', drag)
-      nodes.addEventListener('touchend', endDrag)
-      nodes.addEventListener('touchleave', endDrag)
-      nodes.addEventListener('touchcancel', endDrag)
+      incoming.addEventListener('mousedown', startDrag)
+      incoming.addEventListener('mousemove', drag)
+      incoming.addEventListener('mouseup', endDrag)
+      incoming.addEventListener('mouseleave', endDrag)
+      incoming.addEventListener('touchstart', startDrag)
+      incoming.addEventListener('touchmove', drag)
+      incoming.addEventListener('touchend', endDrag)
+      incoming.addEventListener('touchleave', endDrag)
+      incoming.addEventListener('touchcancel', endDrag)
 
       function startDrag(e) {
         if (e.type === 'touchstart') {
@@ -47,7 +47,7 @@ export const drag = {
           xOffset = currentX
           yOffset = currentY
 
-          setTranslate(currentX, currentY, nodes)
+          setTranslate(currentX, currentY, incoming)
         }
       }
 

canvas-10-feb/src/components/otherNodeslayer.vue

 <template>
-  <div ref="othernodes" class="othernodes">
-    <form>
-      <p :id="nodeid">{{ nodetext }}</p>
-      <p>markdown supported</p>
-    </form>
+  <div ref="othernodes" class="node">
+    <p :id="nodeid">{{ nodetext }}</p>
+    <p>markdown supported</p>
   </div>
 </template>
 
 <script>
 import { drag } from './mixins/drag.js'
-// import { mapState } from 'vuex'
 
 export default {
   name: 'otherNodeslayer',
@@ -26,8 +23,8 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.othernodes {
+.node {
   background-color: aquamarine;
-  /* position: absolute; */
+  position: absolute;
 }
 </style>

canvas-10-feb/src/views/Home.vue

 <template>
   <div class="home">
-    <otherNodeslayer
-      v-for="value in otherNodes"
+    <NodesLayer
+      v-for="value in myNodes"
       v-bind:key="value.nodeid"
       v-bind:nodeid="value.nodeid"
       v-bind:nodetext="value.nodetext"
     />
-    <NodesLayer
-      v-for="value in myNodes"
+    <otherNodeslayer
+      v-for="value in otherNodes"
       v-bind:key="value.nodeid"
       v-bind:nodeid="value.nodeid"
       v-bind:nodetext="value.nodetext"
     />
-
     <CanvasLayer />
     <ControlsLayer />
   </div>