Base tree, drag and drop done

Author: phphe

.gitignore

@@ -20,5 +20,5 @@ yarn-error.log*
 *.sw*
 
 # dev
-/src/components/autoMoveDragPlaceHolderDev.js
-/src/components/_info.json
+/src/plugins/draggable-decision-part-dev.js
+/src/plugins/_info.json

package-lock.json

@@ -9,19 +9,25 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
-    "draggable-helper": "^1.0.20",
-    "helper-js": "^1.3.12",
+    "draggable-helper": "^1.1.1",
+    "helper-js": "^1.4.3",
     "tree-helper": "^1.0.5",
     "vue": "^2.6.10",
     "vue-functions": "^1.0.3",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.4.4",
+    "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
+    "@babel/plugin-proposal-function-sent": "^7.5.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.2.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
     "@vue/cli-plugin-babel": "^3.9.0",
     "@vue/cli-plugin-unit-mocha": "^3.9.0",
     "@vue/cli-service": "^3.9.0",
     "@vue/test-utils": "1.0.0-beta.29",
-    "bili": "^4.8.0",
+    "bili": "^4.8.1",
     "chai": "^4.1.2",
     "pug": "^2.0.4",
     "pug-plain-loader": "^1.0.0",

package.json

@@ -12,6 +12,7 @@
       <strong>We're sorry but vue-draggable-nested-tree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
+    <div id="debug"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>

public/index.html

@@ -2,19 +2,13 @@
 <template lang="pug">
 #app
   BaseTree.mr
-  //- MaxLevelTree.mr
-  //- CollapsingAnimation.mr
-  //- Empty.mr
 </template>
 
 <script>
 import BaseTree from '@/examples/Base'
-import MaxLevelTree from '@/examples/MaxLevel'
-import CollapsingAnimation from '@/examples/CollapsingAnimation'
-import Empty from '@/examples/Empty'
 
 export default {
-  components: {BaseTree, MaxLevelTree, CollapsingAnimation, Empty},
+  components: {BaseTree},
   // data() {
   //   return {}
   // },

src/App.vue

@@ -1,57 +1,38 @@
 <script>
-import * as hp from 'helper-js'
-import * as th from 'tree-helper'
-import DraggableTreeNode from './DraggableTreeNode.vue'
 import Tree from './Tree.vue'
-import * as ut from '../plugins/utils'
-
-const trees = [] // for multiple trees
-// DragPlaceHolder, unique
-const dplh = {
-  _id: 'draggable_tree_drag_placeHolder',
-  level: null,
-  droppable: false,
-  isDragPlaceHolder: true,
-  class: 'draggable-placeholder',
-  style: {},
-  innerStyle: {},
-  innerClass: 'draggable-placeholder-inner',
-  innerBackStyle: {},
-  innerBackClass: 'draggable-placeholder-inner-back',
-  // children: [],
-}
+import makeTreeDraggable from '../plugins/make-tree-draggable.js'
 
 export default {
   extends: Tree,
+  name: 'Tree',
   props: {
-    getTriggerEl: {type: Function},
-    draggable: {},
-    droppable: {default: true},
-    crossTree: {},
-    ondragstart: {type: Function},
-    ondragend: {type: Function},
-    preventSelect: {default: true},
-  },
-  components: {
-    TreeNode: DraggableTreeNode,
-  },
-  data() {
-    return {
-      // DragPlaceHolder
-      dplh,
-      trees,
-    }
+    indent: {default: 20},
   },
+  // components: {},
+  // data() {
+  //   return {}
+  // },
   // computed: {},
   // watch: {},
   // methods: {},
-  created() {
-    trees.push(this)
-  },
+  // created() {},
   mounted() {
-  },
-  beforeDestroy() {
-    hp.arrayRemove(trees, this)
+    if (this.isRoot) {
+      makeTreeDraggable(this.$el, {
+        indent: this.indent,
+        unfoldNodeByID: (...args) => this.unfoldNodeByID(...args),
+      })
+    }
   },
 }
 </script>
+
+<style>
+.he-tree .tree-placeholder{
+}
+.he-tree .tree-placeholder-node{
+  background: #ddf2f9;
+  border: 1px dashed #00d9ff;
+  height: 20px;
+}
+</style>