ng-drag-to-reorder - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

bower.json

 {
   "name": "ng-drag-to-reorder",
   "main": "./ngDragToReorder.js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Lightweight AngularJS directive for reordering any collection of elements using the HTML5 drag and drop API without any dependencies other than Angular. No jQuery!",
@@ -33,4 +33,4 @@ "homepage": "https://github.com/mhthompson86/ng-drag-to-reorder",
     "*.json",
-    "demo"
+    "demo/"
   ]
 }

ngDragToReorder.js

@@ -17,7 +17,10 @@ (function () {
         scope: true,
-        controller: ['$parse', '$attrs', '$scope', function ($parse, $attrs, $scope) {
-          this.getList = function() {
+        controller: ['$parse', '$attrs', '$scope', '$element', function ($parse, $attrs, $scope, $element) {
+          this.getList = function () {
             //return a shallow copy and prevents the updating of the parent object
             return $parse($attrs.dragToReorder)($scope).slice();
           };
+          this.elem = function () {
+            return $element[0];
+          };
         }],
@@ -30,6 +33,9 @@ }
         scope: true,
-        controller: ['$parse', '$attrs', '$scope', function ($parse, $attrs, $scope) {
-          this.getList = function() {
+        controller: ['$parse', '$attrs', '$scope', '$element', function ($parse, $attrs, $scope, $element) {
+          this.getList = function () {
             return $parse($attrs.dragToReorderBind)($scope);
           };
+          this.elem = function () {
+            return $element[0];
+          };
         }],
@@ -46,6 +52,8 @@ }
 
-          var el = element[0], list, stringIdx, int, item, listGetter = ctrls[0] ? ctrls[0] : ctrls[1],
+          var el = element[0], list, stringIdx, int, item, listCtrl = ctrls[0] ? ctrls[0] : ctrls[1],
             newIdx, prevIdx, target, offsetY, dragging = 'dtr-dragging', over = 'dtr-over',
             droppingAbove = 'dtr-dropping-above', droppingBelow = 'dtr-dropping-below', transition = 'dtr-transition',
-            eventName = 'dropped', delay = 1000, loaded = false, above = [], below = [], i, j;
+            eventName = 'dropped', delay = 1000, loaded = false, above = [], below = [], i, j,
+            topOffset = 50, bottomOffset = 50, windowHeight, listHeight, slowScroll = false, fastScroll = false,
+            listScrollbar = false, listEl, listScroll = false, itemOffestTop, startY, listTopY;
 
@@ -78,2 +86,3 @@
             el.addEventListener('drop', drop, false);
+            el.addEventListener('drag', drag, false);
           }
@@ -89,4 +98,118 @@
             el.removeEventListener('drop', drop, false);
+            el.removeEventListener('drag', drag, false);
           }
 
+
+          function drag(e) {
+            if (listScrollbar) {
+              if (e.pageY - listTopY <= 25) {
+                if (listEl.scrollTop > 0) {
+                  if (!listScroll) {
+                    listScroll = true;
+                    scrollList(-3);
+                  }
+                }
+              } else if (listTopY + listHeight - e.pageY <= 25) {
+                if (listEl.scrollTop < listEl.scrollHeight - listHeight) {
+                  if (!listScroll) {
+                    listScroll = true;
+                    scrollList(3);
+                  }
+                }
+              } else listScroll = false;
+            }
+
+            if (e.clientY <= topOffset / 2) {
+              if (!fastScroll) {
+                slowScroll = false;
+                fastScroll = true;
+                scrollFast(-6);
+              }
+            } else if (e.clientY <= topOffset) {
+              if (!slowScroll) {
+                fastScroll = false;
+                slowScroll = true;
+                scrollSlow(-3);
+              }
+            } else if (e.clientY >= windowHeight - bottomOffset / 2) {
+              if (!fastScroll) {
+                slowScroll = false;
+                fastScroll = true;
+                scrollFast(6);
+              }
+            } else if (e.clientY >= windowHeight - bottomOffset) {
+              if (!slowScroll) {
+                fastScroll = false;
+                slowScroll = true;
+                scrollSlow(3);
+              }
+            } else {
+              slowScroll = false;
+              fastScroll = false;
+            }
+          }
+
+          function scrollSlow(step) {
+            console.log('scroll slow');
+            window.scrollBy(0, step);
+            if (slowScroll)
+              setTimeout(function () {
+                scrollSlow(step);
+              }, 20)
+          }
+
+          function scrollFast(step) {
+            window.scrollBy(0, step);
+            if (fastScroll)
+              setTimeout(function () {
+                scrollFast(step);
+              }, 20)
+          }
+
+          function scrollList(step) {
+            if (listScroll) {
+              listEl.scrollTop = listEl.scrollTop + step;
+              setTimeout(function () {
+                scrollList(step);
+              }, 20)
+            } else console.log(listScroll, 'scroll list stop');
+          }
+
+
+          function dragStart(e) {
+            windowHeight = window.innerHeight;
+            listHeight = this.parentElement.clientHeight;
+            listScrollbar = this.parentElement.scrollHeight > listHeight;
+            listTopY = angular.element(this.parentElement).offset().top;
+            itemOffestTop = angular.element(e.target).position().top;
+            startY = e.pageY;
+            listEl = this.parentElement;
+            e.dataTransfer.effectAllowed = 'move';
+            stringIdx = scope.$index.toString();
+            e.dataTransfer.setData('text', stringIdx);
+            this.classList.add(dragging);
+            this.classList.add(transition);
+            return false;
+          }
+
+          function dragEnd(e) {
+            console.log('drag end');
+            slowScroll = false;
+            fastScroll = false;
+            listScroll = false;
+            target = this;
+            target.classList.remove(dragging);
+            if (attrs.dtrTransitionTimeout) {
+              int = parseInt($parse(attrs.dtrTransitionTimeout)(scope), 10);
+              if (typeof int === 'number' && int >= 0)
+                delay = int;
+            }
+            setTimeout(function () {
+              target.classList.remove(transition)
+            }, delay);
+            cleanupClasses();
+            return false;
+          }
+
+
           function drop(e) {
@@ -111,3 +234,3 @@ e.preventDefault();
 
-            list = listGetter.getList();
+            list = listCtrl.getList();
             item = list.splice(prevIdx, 1)[0];
@@ -128,38 +251,15 @@ list.splice(newIdx, 0, item);
             this.classList.remove(droppingBelow);
-            if (this.previousElementSibling) {
-              this.previousElementSibling.classList.remove(over);
-              this.previousElementSibling.classList.remove(droppingAbove);
-              this.previousElementSibling.classList.remove(droppingBelow);
-            }
-            if (this.nextElementSibling) {
-              this.nextElementSibling.classList.remove(over);
-              this.nextElementSibling.classList.remove(droppingAbove);
-              this.nextElementSibling.classList.remove(droppingBelow);
-            }
+            /* if (this.previousElementSibling) {
+             this.previousElementSibling.classList.remove(over);
+             this.previousElementSibling.classList.remove(droppingAbove);
+             this.previousElementSibling.classList.remove(droppingBelow);
+             }
+             if (this.nextElementSibling) {
+             this.nextElementSibling.classList.remove(over);
+             this.nextElementSibling.classList.remove(droppingAbove);
+             this.nextElementSibling.classList.remove(droppingBelow);
+             }*/
           }
 
-          function dragStart(e) {
-            e.dataTransfer.effectAllowed = 'move';
-            stringIdx = scope.$index.toString();
-            e.dataTransfer.setData('text', stringIdx);
-            this.classList.add(dragging);
-            this.classList.add(transition);
-            return false;
-          }
 
-          function dragEnd(e) {
-            target = this;
-            target.classList.remove(dragging);
-            if (attrs.dtrTransitionTimeout) {
-              int = parseInt($parse(attrs.dtrTransitionTimeout)(scope), 10);
-              if (typeof int === 'number' && int >= 0)
-                delay = int;
-            }
-            setTimeout(function () {
-              target.classList.remove(transition)
-            }, delay);
-            cleanupClasses();
-            return false;
-          }
-
           function dragOver(e) {
@@ -169,16 +269,18 @@ e.preventDefault();
             offsetY = e.offsetY;
-            if (offsetY < (this.offsetHeight / 2)) {
-              this.classList.remove(droppingBelow);
-              this.classList.add(droppingAbove);
-              if (this.previousElementSibling)
-                this.previousElementSibling.classList.add(droppingBelow);
-              if (this.nextElementSibling)
-                this.nextElementSibling.classList.remove(droppingAbove);
-            } else {
-              this.classList.remove(droppingAbove);
-              this.classList.add(droppingBelow);
-              if (this.previousElementSibling)
-                this.previousElementSibling.classList.remove(droppingBelow);
-              if (this.nextElementSibling)
-                this.nextElementSibling.classList.add(droppingAbove);
+            if (!this.classList.contains(dragging)) {
+              if (offsetY < (this.offsetHeight / 2)) {
+                this.classList.remove(droppingBelow);
+                this.classList.add(droppingAbove);
+                /* if (this.previousElementSibling)
+                 this.previousElementSibling.classList.add(droppingBelow);
+                 if (this.nextElementSibling)
+                 this.nextElementSibling.classList.remove(droppingAbove);*/
+              } else {
+                this.classList.remove(droppingAbove);
+                this.classList.add(droppingBelow);
+                /*  if (this.previousElementSibling)
+                 this.previousElementSibling.classList.remove(droppingBelow);
+                 if (this.nextElementSibling)
+                 this.nextElementSibling.classList.add(droppingAbove);*/
+              }
             }
@@ -185,0 +287,0 @@ return false;

package.json

 {
   "name": "ng-drag-to-reorder",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Lightweight AngularJS drag and drop functionality to reorder lists without any dependencies other than Angular.",
@@ -5,0 +5,0 @@ "main": "ngDragToReorder.js",

No alert changes

Improved metrics

Total package byte prevSize

120502

increased by80.55%

Lines of code

320

increased by40.97%

No dependency changes