3.1.0

- added: - the dropToMove property - removed: - the useDefaultDrop property - the useDefaultIsDroppable property - fixed: - the tree ref is undefined sometimes
TinyWisp · Dec 6, 2020 · bc22e5f · bc22e5f
1 parent d972810
commit bc22e5f
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 121 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+3.1.0
+- added:
+    - the dropToMove property
+- removed:
+    - the useDefaultDrop property
+    - the useDefaultIsDroppable property
+- fixed:
+    - the tree ref is undefined sometimes
+
 3.0.0
 - added:
     - the enableDragNodeOut property

diff --git a/CHANGELOG.zh.md b/CHANGELOG.zh.md
@@ -1,3 +1,12 @@
+3.1.0
+- 添加:
+    - 属性 dropToMove
+- 删除:
+    - 属性 useDefaultDrop
+    - 属性 useDefaultIsDroppable
+- 修正:
+    - console中有时会报错，this.$refs.tree为undefined
+
 3.0.0
 - 添加:
     - 属性 enableDragNodeOut

diff --git a/docs/css/app.f5af9f14.css → docs/css/app.e8e9eebe.css b/docs/css/app.f5af9f14.css → docs/css/app.e8e9eebe.css
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>twtree</title><link href="css/app.f5af9f14.css" rel="preload" as="style"><link href="js/app.a5c477cc.js" rel="preload" as="script"><link href="js/chunk-vendors.015f92ae.js" rel="preload" as="script"><link href="css/app.f5af9f14.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.015f92ae.js"></script><script src="js/app.a5c477cc.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>twtree</title><link href="css/app.e8e9eebe.css" rel="preload" as="style"><link href="js/app.cf0881d9.js" rel="preload" as="script"><link href="js/chunk-vendors.015f92ae.js" rel="preload" as="script"><link href="css/app.e8e9eebe.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.015f92ae.js"></script><script src="js/app.cf0881d9.js"></script></body></html>
diff --git a/docs/js/app.a5c477cc.js b/docs/js/app.a5c477cc.js
diff --git a/docs/js/app.a5c477cc.js.map b/docs/js/app.a5c477cc.js.map
diff --git a/docs/js/app.cf0881d9.js b/docs/js/app.cf0881d9.js
diff --git a/docs/js/app.cf0881d9.js.map b/docs/js/app.cf0881d9.js.map
diff --git a/example/views/DragAndDropDragANodeOutExample.vue b/example/views/DragAndDropDragANodeOutExample.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="example-wrapper">
     <div class="panel">
-      <TWTree :tree="tree"  ref="tree"  cass="tree" :enableDragNodeOut="true"/>
+      <TWTree :tree="tree"  ref="tree"  class="tree" :enableDragNodeOut="true"/>
       <div
         class="container"
         @dragover="dragOver"

diff --git a/example/views/DragAndDropDropAnExternalElementExample.vue b/example/views/DragAndDropDropAnExternalElementExample.vue
@@ -92,10 +92,6 @@ export default {
       this.draggedIdx = idx
     },
     drop (dragAndOver) {
-      if (dragAndOver.status !== 3) {
-        return
-      }
-
       let title = this.draggableElements[this.draggedIdx]
       let node  = {
         id: Date.now(),

diff --git a/example/views/DragAndDropMultipleTreesExample.vue b/example/views/DragAndDropMultipleTreesExample.vue
@@ -192,23 +192,4 @@ export default {
   font-weight: bold;
   font-size: 18px;
 }
-.container {
-  padding: 0 2em;
-  width: 100px;
-  border: 0;
-  position: absolute;
-  left: 60%;
-  top: 100px;
-}
-.container .draggable-element {
-  border: 1px solid gray;
-  width: auto;
-  height: 1em;
-  padding: 0.2em;
-  margin-bottom: 1em;
-  font-size: 12px;
-}
-.container .draggable-element:hover {
-  background-color: lightgreen;
-}
 </style>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twtree",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "A highly customizable tree component for vue, which features checkbox, async loading, drag and drop, context menu and custom appearance.",
   "main": "lib/twtree.umd.min.js",
   "module": "lib/twtree.esm.js",

diff --git a/src/TWTree.vue b/src/TWTree.vue
@@ -219,11 +219,7 @@ export default {
       type: Boolean,
       default: false
     },
-    useDefaultIsDroppable: {
-      type: Boolean,
-      default: true
-    },
-    useDefaultDrop: {
+    dropToMove: {
       type: Boolean,
       default: true
     },
@@ -1062,7 +1058,7 @@ export default {
       return true
     },
     isDroppable() {
-      if (this.dragAndDrop.status == this.DND_STATUS.INTERNAL && this.useDefaultIsDroppable === true) {
+      if (this.dragAndDrop.status == this.DND_STATUS.INTERNAL && this.dropToMove === true) {
         if (this.defaultIsDroppable() === false) {
           return false
         }
@@ -1097,6 +1093,9 @@ export default {
       this.dragAndDrop.clientX = event.clientX + 'px'
       this.dragAndDrop.clientY = event.clientY + 'px'
 
+      if (this.$refs.tree === undefined) {
+        return
+      }
       let treeRect = this.$refs.tree.$el.getBoundingClientRect()
       if (event.clientX <= treeRect.left || event.clientX >= treeRect.right || event.clientY <= treeRect.top || event.clientY >= treeRect.bottom) {
         this.dragAndDrop.status = this.dragAndDrop.dragNode !== null
@@ -1176,7 +1175,7 @@ export default {
       this.dragAndDrop.status   = this.DND_STATUS.NONE
       this.$emit('dragend', this.dragAndDrop, event)
     },
-    dropToMove() {
+    moveOnDrop() {
       if (this.dragAndDrop.status !== this.DND_STATUS.INTERNAL) {
         return
       }
@@ -1217,8 +1216,8 @@ export default {
         return
       }
 
-      if (this.dragAndDrop.status === this.DND_STATUS.INTERNAL && this.useDefaultDrop === true) {
-        this.dropToMove()
+      if (this.dragAndDrop.status === this.DND_STATUS.INTERNAL && this.dropToMove === true) {
+        this.moveOnDrop()
       } else {
         this.$emit('drop', this.getShallowCopyOfDragAndDrop(), event)
         if (this.dragAndDrop.status === this.DND_STATUS.INTO) {
@@ -1435,7 +1434,7 @@ export default {
     this.refresh()
 
     //drag and drop
-    document.body.addEventListener('dragover', this.globalDragOverEvent)
+    document.body.addEventListener('dragover', this.globalDragOverEvent.bind(this))
     this.emptyImage = new Image()
     this.emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>twtree</title><link href="css/app.f5af9f14.css" rel="preload" as="style"><link href="js/app.a5c477cc.js" rel="preload" as="script"><link href="js/chunk-vendors.015f92ae.js" rel="preload" as="script"><link href="css/app.f5af9f14.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.015f92ae.js"></script><script src="js/app.a5c477cc.js"></script></body></html>
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>twtree</title><link href="css/app.e8e9eebe.css" rel="preload" as="style"><link href="js/app.cf0881d9.js" rel="preload" as="script"><link href="js/chunk-vendors.015f92ae.js" rel="preload" as="script"><link href="css/app.e8e9eebe.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but twtree doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.015f92ae.js"></script><script src="js/app.cf0881d9.js"></script></body></html>