fix(listView): reordering up is more responsive, fix scrolling error

Closes #1202
ionic-team · May 14, 2014 · df9c074 · df9c074
1 parent d4f9ad0
commit df9c074
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/js/views/listView.js b/js/views/listView.js
@@ -191,9 +191,10 @@
   ReorderDrag.prototype = new DragOp();
 
   ReorderDrag.prototype._moveElement = function(e) {
-    var y = e.gesture.center.pageY -
-      this._currentDrag.elementHeight +
+    var y = e.gesture.center.pageY +
       this.scrollView.getValues().top -
+      this.scrollView.__container.offsetTop -
+      (this._currentDrag.elementHeight / 2) -
       this.listEl.offsetTop;
     this.el.style[ionic.CSS.TRANSFORM] = 'translate3d(0, '+y+'px, 0)';
   };
@@ -223,17 +224,19 @@
 
   ReorderDrag.prototype.drag = ionic.animationFrameThrottle(function(e) {
     // We really aren't dragging
+    var self = this;
     if(!this._currentDrag) {
       return;
     }
 
     var scrollY = 0;
     var pageY = e.gesture.center.pageY;
+    var offset = this.listEl.offsetTop + this.scrollView.__container.offsetTop;
 
     //If we have a scrollView, check scroll boundaries for dragged element and scroll if necessary
     if (this.scrollView) {
-      var container = this.scrollEl;
 
+      var container = this.scrollView.__container;
       scrollY = this.scrollView.getValues().top;
 
       var containerTop = container.offsetTop;
@@ -242,10 +245,18 @@
 
       if (e.gesture.deltaY < 0 && pixelsPastTop > 0 && scrollY > 0) {
         this.scrollView.scrollBy(null, -pixelsPastTop);
+        //Trigger another drag so the scrolling keeps going
+        setTimeout(function() {
+          self.drag(e);
+        }.bind(this));
       }
       if (e.gesture.deltaY > 0 && pixelsPastBottom > 0) {
         if (scrollY < this.scrollView.getScrollMax().top) {
           this.scrollView.scrollBy(null, pixelsPastBottom);
+          //Trigger another drag so the scrolling keeps going
+          setTimeout(function() {
+            self.drag(e);
+          }.bind(this));
         }
       }
     }
@@ -259,7 +270,7 @@
     if(this._isDragging) {
       this._moveElement(e);
 
-      this._currentDrag.currentY = scrollY + pageY - this._currentDrag.placeholder.parentNode.offsetTop;
+      this._currentDrag.currentY = scrollY + pageY - offset;
 
       this._reorderItems();
     }
@@ -279,13 +290,14 @@
     var bottomSibling = siblings[Math.min(siblings.length, index+1)];
     var thisOffsetTop = this._currentDrag.currentY;// + this._currentDrag.startOffsetTop;
 
-    if(topSibling && (thisOffsetTop < topSibling.offsetTop + topSibling.offsetHeight/2)) {
+   if(topSibling && (thisOffsetTop < topSibling.offsetTop + topSibling.offsetHeight)) {
       ionic.DomUtil.swapNodes(this._currentDrag.placeholder, topSibling);
       return index - 1;
-    } else if(bottomSibling && thisOffsetTop > (bottomSibling.offsetTop + bottomSibling.offsetHeight/2)) {
+    } else if(bottomSibling && thisOffsetTop > (bottomSibling.offsetTop)) {
       ionic.DomUtil.swapNodes(bottomSibling, this._currentDrag.placeholder);
       return index + 1;
     }
+
   };
 
   ReorderDrag.prototype.end = function(e, doneCallback) {

diff --git a/test/html/list.html b/test/html/list.html
@@ -24,6 +24,10 @@ <h1 class="title">Ionic Delete/Option Buttons</h1>
       </div>
     </ion-header-bar>
 
+    <ion-header-bar class="bar-positive bar-assertive bar-subheader">
+      <h1 class="title">Subheader</h1>
+    </ion-header-bar>
+
     <ion-content>
       <!--
         Search bar