Merge pull request #126 from pmsandhu/bufix/issue-63-reordering-items…

…-not-working-correctly Fixes issue #63 - Reordering items not working correctly
yotamberk · Feb 19, 2019 · f7f0047 · f7f0047
2 parents 5b7a477 + c91ed98
commit f7f0047
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
@@ -127,6 +127,8 @@ class Group {
    * @param {Object} data   Group data, can contain properties content and className
    */
   setData(data) {
+    if (this.itemSet.groupTouchParams.isDragging) return;
+
     // update contents
     let content;
     let templateFunction;

diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
@@ -211,9 +211,12 @@ class ItemSet extends Component {
     this.popup = null;
 
     this.touchParams = {}; // stores properties while dragging
-    this.groupTouchParams = {};
+    this.groupTouchParams = {
+      group: null,
+      isDragging: false
+    };
+
     // create the HTML DOM
-
     this._create();
 
     this.setOptions(options);
@@ -1845,19 +1848,29 @@ class ItemSet extends Component {
       util.addClassName(group.dom.label, collapsedDirClassName);
     }
   }
-
+
+  toggleGroupDragClassName(group) {
+    group.dom.label.classList.toggle('timeline-group-is-dragging');
+    group.dom.foreground.classList.toggle('timeline-group-is-dragging');
+  }
+
   _onGroupDragStart(event) {
-      if (this.options.groupEditable.order) {
-          this.groupTouchParams.group = this.groupFromTarget(event);
-
-          if (this.groupTouchParams.group) {
-              event.stopPropagation();
-
-              this.groupTouchParams.originalOrder = this.groupsData.getIds({
-                order: this.options.groupOrder
-              });
-          }
+    if (this.groupTouchParams.isDragging) return;
+
+    if (this.options.groupEditable.order) {
+      this.groupTouchParams.group = this.groupFromTarget(event);
+
+      if (this.groupTouchParams.group) {
+        event.stopPropagation();      
+
+        this.groupTouchParams.isDragging = true;
+        this.toggleGroupDragClassName(this.groupTouchParams.group);
+
+        this.groupTouchParams.originalOrder = this.groupsData.getIds({
+          order: this.options.groupOrder
+        });
       }
+    }
   }
 
   _onGroupDrag(event) {
@@ -1964,6 +1977,8 @@ class ItemSet extends Component {
   }
 
   _onGroupDragEnd(event) {
+    this.groupTouchParams.isDragging = false;
+
     if (this.options.groupEditable.order && this.groupTouchParams.group) {
       event.stopPropagation();
 
@@ -2021,7 +2036,9 @@ class ItemSet extends Component {
       });
 
       me.body.emitter.emit('groupDragged', { groupId: id });
-      }
+      this.toggleGroupDragClassName(this.groupTouchParams.group);
+      this.groupTouchParams.group = null;
+    }
   }
 
   /**

diff --git a/lib/timeline/component/css/labelset.css b/lib/timeline/component/css/labelset.css
@@ -25,6 +25,10 @@
   cursor: pointer;
 }
 
+.timeline-group-is-dragging {
+  background: rgba(0, 0, 0, .1);
+}
+
 .timeline-labelset .timeline-label:last-child {
   border-bottom: none;
 }