drag and drop

src/components/AppMain.vue

@@ -1,27 +0,0 @@
-<template>
-  <div class="app-main">
-    <LeftTools></LeftTools>
-    <GraphContainer></GraphContainer>
-  </div>
-</template>
-
-<script>
-import LeftTools from './LeftTools'
-import GraphContainer from './GraphContainer'
-export default {
-  components: {
-    LeftTools,
-    GraphContainer
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  width: 100%;
-  height: 100%;
-}
-</style>

src/components/FlowChart.vue

@@ -1,18 +1,43 @@
 <template>
   <div class="flow-chart">
     <Tools></Tools>
-    <AppMain></AppMain>
+    <div class="app-main">
+      <LeftTools
+        @changeState="changeState"
+      ></LeftTools>
+      <div class="graph-container">
+        <Graph
+          :isDragging="isDragging"
+        ></Graph>
+        <GraphProp></GraphProp>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Tools from './Tools'
-import AppMain from './AppMain'
+import LeftTools from './LeftTools'
+import Graph from './Graph'
+import GraphProp from './GraphProp'
 
 export default {
+  data () {
+    return {
+      isDragging: false
+    }
+  },
   components: {
     Tools,
-    AppMain
+    LeftTools,
+    Graph,
+    GraphProp
+  },
+  methods: {
+    changeState: function (state) {
+      console.log(state)
+      this.isDragging = state
+    }
   }
 }
 </script>
@@ -23,4 +48,16 @@ export default {
   flex-direction: column;
   height: 100%;
 }
+
+.app-main {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.graph-container {
+  flex-grow: 1;
+}
 </style>

src/components/Graph.vue

@@ -1,18 +1,41 @@
 <template>
-  <div class="graph">
+  <div class="container">
+    <div :class="['graph', {active: isDragging}]"
+      @drop="addNode"
+      @dragover.prevent
+    ></div>
   </div>
 </template>
 
 <script>
 export default {
-
+  props: {
+    isDragging: {
+      type: Boolean,
+      require: true
+    }
+  },
+  methods: {
+    addNode: function () {
+      console.log('drop')
+    }
+  }
 }
 </script>
 
 <style scoped>
-.graph {
+.container {
   height: 80%;
-  border-bottom: 1px solid #6e94e0;
+  padding: 4px;
+}
+
+.graph {
+  height: 100%;
+  border: 1px solid transparent;
   background: url('../assets/wf_edit_bg.gif');
 }
+
+.graph.active {
+  border: 1px dashed #5cdc5c;
+}
 </style>

src/components/GraphContainer.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="graph-container">
-    <Graph></Graph>
-    <GraphProp></GraphProp>
-  </div>
-</template>
-
-<script>
-import Graph from './Graph'
-import GraphProp from './GraphProp'
-export default {
-  components: {
-    Graph,
-    GraphProp
-  }
-}
-</script>
-
-<style scoped>
-.graph-container {
-  flex-grow: 1;
-}
-</style>

src/components/GraphProp.vue

@@ -44,6 +44,7 @@ ul li span {
 .prop-title {
   line-height: 40px;
   padding-left: 6px;
+  border-top: 1px solid #6e94e0;
   text-align: middle;
   background-color: #d7dfef;;
 }

src/components/LeftTools.vue

@@ -4,7 +4,9 @@
       <li v-for="btn in btns"
           :key="btn.type"
           :draggable="btn.draggable"
-          @click="toggle(btn)"
+          @click="changeBtn(btn)"
+          @dragstart="dragstart($event, btn)"
+          @dragend="dragend"
           :class="{active: btn.active}"
       >
         <i :class="['tools', btn.type+'-icon']"></i>
@@ -32,11 +34,20 @@ export default {
     }
   },
   methods: {
-    toggle: function (btn) {
+    changeBtn: function (btn) {
       this.btns.map(function (item) {
         item.active = false
       })
       btn.active = !btn.active
+    },
+    dragstart: function (event, item) {
+      this.changeBtn(item)
+      this.$emit('changeState', true)
+      event.dataTransfer.setData('item', JSON.stringify(item))
+    },
+    dragend: function (event) {
+      this.$emit('changeState', false)
+      event.dataTransfer.clearData()
     }
   }
 }