Fixed glitchy reordering of trees

app/imports/ui/components/tree/TreeNodeList.vue

@@ -1,18 +1,18 @@
 <template lang="html">
   <!--use value for immutable, list for auto-updating children -->
   <draggable
+    v-model="displayedChildren"
     class="drag-area"
-    :value="children"
     :group="group"
-    :animation="200"
     :move="move"
+    :animation="200"
     ghost-class="ghost"
     draggable=".item"
     handle=".handle"
     @change="change"
   >
     <tree-node
-      v-for="child in children"
+      v-for="child in displayedChildren"
       :key="child.node._id"
       class="item"
       :node="child.node"
@@ -53,6 +53,7 @@
 		},
 		data(){ return {
 			expanded: false,
+      displayedChildren: [],
 		}},
 		computed: {
 			hasChildren(){
@@ -62,6 +63,14 @@
 				return this.expanded && (this.organize || this.hasChildren)
 			},
 		},
+    watch: {
+      children(value){
+        this.displayedChildren = value;
+      }
+    },
+    mounted(){
+      this.displayedChildren = this.children;
+    },
 		methods: {
 			change({added, moved}){
 				let event = moved || added;
@@ -69,10 +78,20 @@
 					let doc = event.element.node;
 					let newIndex;
 					if (event.newIndex === 0){
-						newIndex = 0;
+						newIndex = -0.5;
 					} else {
-						let childBeforeNewIndex = this.children[event.newIndex - 1];
-						newIndex = childBeforeNewIndex.node.order + 1;
+            if (event.newIndex < this.children.length){
+              let childAtNewIndex = this.children[event.newIndex];
+              let indexOrder = childAtNewIndex.node.order;
+              if (event.newIndex > event.oldIndex){
+                newIndex = indexOrder + 0.5;
+              } else {
+                newIndex = indexOrder - 0.5;
+              }
+            } else {
+              let childBeforeNewIndex = this.children[event.newIndex - 1];
+              newIndex = childBeforeNewIndex.node.order + 0.5;
+            }
 					}
 					if (moved){
 						this.$emit('reordered', {doc, newIndex});
@@ -88,9 +107,19 @@
 				let allowed = isParentAllowed({parentType, childType});
 				return allowed;
 			},
+      log: console.log,
 		},
 	};
 </script>
 
 <style lang="css" scoped>
+  .flip-list-leave-active {
+    display: none;
+  }
+  .flip-list-move {
+    transition: transform 0.5s;
+  }
+  .no-move {
+    transition: transform 0s;
+  }
 </style>