nested-sort - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

dist/nested-sort.cjs.js

@@ -5,8 +5,7 @@ 'use strict';
 
-  constructor(opt) {
-    opt = opt || {};
-
-    // private data
-    this.selector = opt.selector || '';
-
+  constructor({
+    droppingEdge = 15,
+    el
+  } = {}) {
+    this.selector = el;
     this.sortableList = null;
@@ -18,3 +17,10 @@ this.placeholderUl = null;
 
+    this.targetNode = {
+      X: null,
+      Y: null
+    };
+
     this.distances = {
+      droppingEdge,
+      droppingEdgeNegative: droppingEdge * -1,
       mouseTo: {
@@ -31,13 +37,13 @@ targetedElTop: undefined
 
-    this.cursorX = null;
-    this.cursorY = null;
-    this.targetedNodeX = null;
-    this.targetedNodeY = null;
+    this.cursor = {
+      X: null,
+      Y: null
+    };
 
-    this.dropEvent = new Event('drop');
+    this.classNames = {
+      dragged: 'ns-dragged',
+      placeholder: 'ns-placeholder',
+      targeted: 'ns-targeted',
+    };
 
-    this.selector = opt.el;
-    this.distances.droppingEdge = opt.droppingEdge || 15;
-    this.distances.droppingEdgeNegative = this.distances.droppingEdge * -1;
-
     this.initDragAndDrop();
@@ -49,3 +55,2 @@ }
     document.addEventListener('dragover', this.dragListener.bind(this), false);
-    // document.addEventListener('touchmove', this.dragListener.bind(this), false);
 
@@ -60,33 +65,71 @@ this.initPlaceholderList();
       el.addEventListener('dragstart', this.onDragStart.bind(this), false);
-      // el.addEventListener('touchstart', onDragStart, false);
-
       el.addEventListener('dragenter', this.onDragEnter.bind(this), false);
-      // el.addEventListener('dragexit', removeStyles, false);
-      el.addEventListener('dragleave', this.onDragLeave.bind(this), false);
       el.addEventListener('dragend', this.onDragEnd.bind(this), false);
-      el.addEventListener('drop', this.onDrop.bind(this), false);
+
+      this.addListItemStyles(el);
     });
   }
 
+  getComputedStyleValue(el, prop) {
+    return window.getComputedStyle(el, null).getPropertyValue(prop);
+  }
+
+  addListItemStyles(li) {
+    // let's add a move cursor icon if it does not already have a cursor css property
+    const cursor = this.getComputedStyleValue(li, 'cursor');
+    if (!cursor || cursor === 'auto') {
+      li.style.cursor = 'move';
+    }
+  }
+
   onDragStart(e) {
     this.draggedNode = e.target;
-    this.draggedNode.classList.add('dragged');
+    this.draggedNode.classList.add(this.classNames.dragged);
     e.dataTransfer.setData('text', 'Drag started!'); // Hack for Firefox!
   }
 
+  onDragOver(e) {
+    e.preventDefault(); // prevent default to allow drop
+  }
+
   onDragEnter(e) {
-    e.preventDefault();
+    if (['LI', 'UL'].includes(e.target.nodeName)) {
+      e.preventDefault(); // prevent default to allow drop
 
-    if (['LI', 'UL'].indexOf(e.target.nodeName) > -1) {
+      if (this.targetedNode) this.targetedNode.classList.remove(this.classNames.targeted);
       this.targetedNode = e.target;
+      e.target.classList.add(this.classNames.targeted);
+
+      e.target.addEventListener('dragover', this.onDragOver.bind(this), false);
+      e.target.addEventListener('drop', this.onDrop.bind(this), false);
+      e.target.addEventListener('dragleave', this.onDragLeave.bind(this), false);
     }
   }
 
+  onDragLeave(e) {
+    e.preventDefault();
+    e.target.removeEventListener('dragover', this.onDrop);
+    e.target.removeEventListener('drop', this.onDrop);
+    e.target.removeEventListener('dragleave', this.onDragLeave);
+  }
+
+  onDragEnd(e) {
+    e.preventDefault();
+    this.draggedNode.classList.remove(this.classNames.dragged);
+    this.targetedNode.classList.remove(this.classNames.targeted);
+    this.cleanupPlaceholderLists();
+  }
+
+  onDrop(e) {
+    e.preventDefault();
+    this.maybeDrop();
+    this.cleanupPlaceholderLists();
+  }
+
   dragListener(e) {
-    this.updateCoordinations(e);
+    this.updateCoordination(e);
     this.managePlaceholderLists(e);
-    this.dropIf(e);
   }
 
-  updateCoordinations(e) {
+  updateCoordination(e) {
     this.calcMouseCoords(e);
@@ -96,3 +139,3 @@ this.calcMouseToTargetedElDist();
 
-  dropIf(e) {
+  maybeDrop(e) {
     if (!this.canBeDropped()) {
@@ -102,22 +145,13 @@ return;
 
+    let dropLocation;
     if (this.targetedNode.nodeName === 'LI' && !this.cursorIsIndentedEnough()) {
-      if (
-        this.distances.mouseTo.targetedElTop < 0
-        && this.distances.mouseTo.targetedElTop > this.distances.droppingEdgeNegative
-        // && mouseHasMovedUp()
-      ) {
-        this.dropTheItem('before');
-      } else if (
-        this.distances.mouseTo.targetedElBot < 0
-        && this.distances.mouseTo.targetedElBot > this.distances.droppingEdgeNegative
-        // && mouseHasMovedDown()
-      ) {
-        this.dropTheItem('after');
-      }
+      dropLocation = 'before';
     } else if (this.targetedNode.nodeName === 'UL') {
-      this.dropTheItem('inside');
+      dropLocation = 'inside';
     }
+
+    if (dropLocation) this.dropTheItem(dropLocation, e);
   }
 
-  dropTheItem(place) {
+  dropTheItem(place, e) {
     switch (place) {
@@ -134,13 +168,8 @@ case 'before':
     }
-
-    this.draggedNode.dispatchEvent(this.dropEvent);
   }
 
   calcMouseCoords(e) {
-    // cursorX = e.screenX;
-    // cursorY = e.screenY;
-
     // we're having the client coords because on the next lines, we use getBoundingClientRect which behaves in the same way
-    this.cursorX = e.clientX;
-    this.cursorY = e.clientY;
+    this.cursor.X = e.clientX;
+    this.cursor.Y = e.clientY;
   }
@@ -154,6 +183,6 @@
     let offset = this.targetedNode.getBoundingClientRect();
-    this.targetedNodeX = offset.left;
-    this.targetedNodeY = offset.top;
+    this.targetNode.X = offset.left;
+    this.targetNode.Y = offset.top;
 
-    let result = this.targetedNodeY - this.cursorY;
+    let result = this.targetNode.Y - this.cursor.Y;
     this.distances.mouseTo.targetedElTop = result;
@@ -165,12 +194,2 @@ this.distances.mouseTo.targetedElTopAbs = Math.abs(result);
 
-  onDragLeave(e) {
-    e.preventDefault();
-  }
-
-  onDragEnd(e) {
-    e.preventDefault();
-    this.draggedNode.classList.remove('dragged');
-    this.cleanupPlaceholderLists();
-  }
-
   areNested(child, parent) {
@@ -187,15 +206,7 @@ let isChild = false;
   cursorIsIndentedEnough() {
-    return this.cursorX - this.targetedNodeX > 50;
+    return this.cursor.X - this.targetNode.X > 50;
   }
 
-  mouseHasMovedUp() {
-    return this.draggedNode.getBoundingClientRect().top > this.cursorY;
-  }
-
-  mouseHasMovedDown() {
-    return !this.mouseHasMovedUp();
-  }
-
   mouseIsTooCloseToTop() {
-    return this.cursorY - this.targetedNodeY < this.distances.droppingEdge;
+    return this.cursor.Y - this.targetNode.Y < this.distances.droppingEdge;
   }
@@ -220,4 +231,2 @@
           break;
-        default:
-          return;
       }
@@ -228,3 +237,3 @@ });
   targetedNodeIsPlaceholder() {
-    return this.targetedNode.nodeName === 'UL' && this.targetedNode.classList.contains('placeholder');
+    return this.targetedNode.nodeName === 'UL' && this.targetedNode.classList.contains(this.classNames.placeholder);
   }
@@ -253,10 +262,18 @@
   addPlaceholderList() {
-    this.targetedNode.appendChild(this.getPlaceholderList());
+    const list = this.getPlaceholderList();
+    list.style.minHeight = '0';
+    this.targetedNode.appendChild(list);
+    list.style.transition = 'min-height ease .2s';
+    list.style.minHeight = `${this.draggedNode.offsetHeight}px`;
   }
 
+  targetNodeIsIdentified() {
+    return !!this.targetedNode;
+  }
+
   canBeDropped() {
     let result = true;
 
-    result &= !!this.targetedNode && this.targetedNode !== this.draggedNode;
-    result &= !(this.targetedNode.nodeName === 'UL' && this.targetedNode.querySelectorAll('li').length);
+    result &= this.targetNodeIsIdentified() && this.targetedNode !== this.draggedNode;
+    result &= this.targetNodeIsIdentified() && !(this.targetedNode.nodeName === 'UL' && this.targetedNode.querySelectorAll('li').length);
     result &= !this.areNested(this.targetedNode, this.draggedNode);
@@ -271,4 +288,4 @@
         ul.remove();
-      } else if (ul.classList.contains('placeholder')) {
-        ul.classList.remove('placeholder');
+      } else if (ul.classList.contains(this.classNames.placeholder)) {
+        ul.classList.remove(this.classNames.placeholder);
       }
@@ -280,3 +297,3 @@ });
     this.placeholderUl = document.createElement('ul');
-    this.placeholderUl.classList.add("placeholder");
+    this.placeholderUl.classList.add(this.classNames.placeholder);
   }
@@ -288,8 +305,4 @@
   }
-
-  onDrop() {
-    this.cleanupPlaceholderLists();
-  }
 }
 
 module.exports = nestedSort;

dist/nested-sort.esm.js

 class nestedSort {
 
-  constructor(opt) {
-    opt = opt || {};
-
-    // private data
-    this.selector = opt.selector || '';
-
+  constructor({
+    droppingEdge = 15,
+    el
+  } = {}) {
+    this.selector = el;
     this.sortableList = null;
@@ -15,3 +14,10 @@ this.placeholderUl = null;
 
+    this.targetNode = {
+      X: null,
+      Y: null
+    };
+
     this.distances = {
+      droppingEdge,
+      droppingEdgeNegative: droppingEdge * -1,
       mouseTo: {
@@ -28,13 +34,13 @@ targetedElTop: undefined
 
-    this.cursorX = null;
-    this.cursorY = null;
-    this.targetedNodeX = null;
-    this.targetedNodeY = null;
+    this.cursor = {
+      X: null,
+      Y: null
+    };
 
-    this.dropEvent = new Event('drop');
+    this.classNames = {
+      dragged: 'ns-dragged',
+      placeholder: 'ns-placeholder',
+      targeted: 'ns-targeted',
+    };
 
-    this.selector = opt.el;
-    this.distances.droppingEdge = opt.droppingEdge || 15;
-    this.distances.droppingEdgeNegative = this.distances.droppingEdge * -1;
-
     this.initDragAndDrop();
@@ -46,3 +52,2 @@ }
     document.addEventListener('dragover', this.dragListener.bind(this), false);
-    // document.addEventListener('touchmove', this.dragListener.bind(this), false);
 
@@ -57,33 +62,71 @@ this.initPlaceholderList();
       el.addEventListener('dragstart', this.onDragStart.bind(this), false);
-      // el.addEventListener('touchstart', onDragStart, false);
-
       el.addEventListener('dragenter', this.onDragEnter.bind(this), false);
-      // el.addEventListener('dragexit', removeStyles, false);
-      el.addEventListener('dragleave', this.onDragLeave.bind(this), false);
       el.addEventListener('dragend', this.onDragEnd.bind(this), false);
-      el.addEventListener('drop', this.onDrop.bind(this), false);
+
+      this.addListItemStyles(el);
     });
   }
 
+  getComputedStyleValue(el, prop) {
+    return window.getComputedStyle(el, null).getPropertyValue(prop);
+  }
+
+  addListItemStyles(li) {
+    // let's add a move cursor icon if it does not already have a cursor css property
+    const cursor = this.getComputedStyleValue(li, 'cursor');
+    if (!cursor || cursor === 'auto') {
+      li.style.cursor = 'move';
+    }
+  }
+
   onDragStart(e) {
     this.draggedNode = e.target;
-    this.draggedNode.classList.add('dragged');
+    this.draggedNode.classList.add(this.classNames.dragged);
     e.dataTransfer.setData('text', 'Drag started!'); // Hack for Firefox!
   }
 
+  onDragOver(e) {
+    e.preventDefault(); // prevent default to allow drop
+  }
+
   onDragEnter(e) {
-    e.preventDefault();
+    if (['LI', 'UL'].includes(e.target.nodeName)) {
+      e.preventDefault(); // prevent default to allow drop
 
-    if (['LI', 'UL'].indexOf(e.target.nodeName) > -1) {
+      if (this.targetedNode) this.targetedNode.classList.remove(this.classNames.targeted);
       this.targetedNode = e.target;
+      e.target.classList.add(this.classNames.targeted);
+
+      e.target.addEventListener('dragover', this.onDragOver.bind(this), false);
+      e.target.addEventListener('drop', this.onDrop.bind(this), false);
+      e.target.addEventListener('dragleave', this.onDragLeave.bind(this), false);
     }
   }
 
+  onDragLeave(e) {
+    e.preventDefault();
+    e.target.removeEventListener('dragover', this.onDrop);
+    e.target.removeEventListener('drop', this.onDrop);
+    e.target.removeEventListener('dragleave', this.onDragLeave);
+  }
+
+  onDragEnd(e) {
+    e.preventDefault();
+    this.draggedNode.classList.remove(this.classNames.dragged);
+    this.targetedNode.classList.remove(this.classNames.targeted);
+    this.cleanupPlaceholderLists();
+  }
+
+  onDrop(e) {
+    e.preventDefault();
+    this.maybeDrop();
+    this.cleanupPlaceholderLists();
+  }
+
   dragListener(e) {
-    this.updateCoordinations(e);
+    this.updateCoordination(e);
     this.managePlaceholderLists(e);
-    this.dropIf(e);
   }
 
-  updateCoordinations(e) {
+  updateCoordination(e) {
     this.calcMouseCoords(e);
@@ -93,3 +136,3 @@ this.calcMouseToTargetedElDist();
 
-  dropIf(e) {
+  maybeDrop(e) {
     if (!this.canBeDropped()) {
@@ -99,22 +142,13 @@ return;
 
+    let dropLocation;
     if (this.targetedNode.nodeName === 'LI' && !this.cursorIsIndentedEnough()) {
-      if (
-        this.distances.mouseTo.targetedElTop < 0
-        && this.distances.mouseTo.targetedElTop > this.distances.droppingEdgeNegative
-        // && mouseHasMovedUp()
-      ) {
-        this.dropTheItem('before');
-      } else if (
-        this.distances.mouseTo.targetedElBot < 0
-        && this.distances.mouseTo.targetedElBot > this.distances.droppingEdgeNegative
-        // && mouseHasMovedDown()
-      ) {
-        this.dropTheItem('after');
-      }
+      dropLocation = 'before';
     } else if (this.targetedNode.nodeName === 'UL') {
-      this.dropTheItem('inside');
+      dropLocation = 'inside';
     }
+
+    if (dropLocation) this.dropTheItem(dropLocation, e);
   }
 
-  dropTheItem(place) {
+  dropTheItem(place, e) {
     switch (place) {
@@ -131,13 +165,8 @@ case 'before':
     }
-
-    this.draggedNode.dispatchEvent(this.dropEvent);
   }
 
   calcMouseCoords(e) {
-    // cursorX = e.screenX;
-    // cursorY = e.screenY;
-
     // we're having the client coords because on the next lines, we use getBoundingClientRect which behaves in the same way
-    this.cursorX = e.clientX;
-    this.cursorY = e.clientY;
+    this.cursor.X = e.clientX;
+    this.cursor.Y = e.clientY;
   }
@@ -151,6 +180,6 @@
     let offset = this.targetedNode.getBoundingClientRect();
-    this.targetedNodeX = offset.left;
-    this.targetedNodeY = offset.top;
+    this.targetNode.X = offset.left;
+    this.targetNode.Y = offset.top;
 
-    let result = this.targetedNodeY - this.cursorY;
+    let result = this.targetNode.Y - this.cursor.Y;
     this.distances.mouseTo.targetedElTop = result;
@@ -162,12 +191,2 @@ this.distances.mouseTo.targetedElTopAbs = Math.abs(result);
 
-  onDragLeave(e) {
-    e.preventDefault();
-  }
-
-  onDragEnd(e) {
-    e.preventDefault();
-    this.draggedNode.classList.remove('dragged');
-    this.cleanupPlaceholderLists();
-  }
-
   areNested(child, parent) {
@@ -184,15 +203,7 @@ let isChild = false;
   cursorIsIndentedEnough() {
-    return this.cursorX - this.targetedNodeX > 50;
+    return this.cursor.X - this.targetNode.X > 50;
   }
 
-  mouseHasMovedUp() {
-    return this.draggedNode.getBoundingClientRect().top > this.cursorY;
-  }
-
-  mouseHasMovedDown() {
-    return !this.mouseHasMovedUp();
-  }
-
   mouseIsTooCloseToTop() {
-    return this.cursorY - this.targetedNodeY < this.distances.droppingEdge;
+    return this.cursor.Y - this.targetNode.Y < this.distances.droppingEdge;
   }
@@ -217,4 +228,2 @@
           break;
-        default:
-          return;
       }
@@ -225,3 +234,3 @@ });
   targetedNodeIsPlaceholder() {
-    return this.targetedNode.nodeName === 'UL' && this.targetedNode.classList.contains('placeholder');
+    return this.targetedNode.nodeName === 'UL' && this.targetedNode.classList.contains(this.classNames.placeholder);
   }
@@ -250,10 +259,18 @@
   addPlaceholderList() {
-    this.targetedNode.appendChild(this.getPlaceholderList());
+    const list = this.getPlaceholderList();
+    list.style.minHeight = '0';
+    this.targetedNode.appendChild(list);
+    list.style.transition = 'min-height ease .2s';
+    list.style.minHeight = `${this.draggedNode.offsetHeight}px`;
   }
 
+  targetNodeIsIdentified() {
+    return !!this.targetedNode;
+  }
+
   canBeDropped() {
     let result = true;
 
-    result &= !!this.targetedNode && this.targetedNode !== this.draggedNode;
-    result &= !(this.targetedNode.nodeName === 'UL' && this.targetedNode.querySelectorAll('li').length);
+    result &= this.targetNodeIsIdentified() && this.targetedNode !== this.draggedNode;
+    result &= this.targetNodeIsIdentified() && !(this.targetedNode.nodeName === 'UL' && this.targetedNode.querySelectorAll('li').length);
     result &= !this.areNested(this.targetedNode, this.draggedNode);
@@ -268,4 +285,4 @@
         ul.remove();
-      } else if (ul.classList.contains('placeholder')) {
-        ul.classList.remove('placeholder');
+      } else if (ul.classList.contains(this.classNames.placeholder)) {
+        ul.classList.remove(this.classNames.placeholder);
       }
@@ -277,3 +294,3 @@ });
     this.placeholderUl = document.createElement('ul');
-    this.placeholderUl.classList.add("placeholder");
+    this.placeholderUl.classList.add(this.classNames.placeholder);
   }
@@ -285,8 +302,4 @@
   }
-
-  onDrop() {
-    this.cleanupPlaceholderLists();
-  }
 }
 
 export default nestedSort;

dist/nested-sort.umd.js

@@ -30,8 +30,11 @@ (function (global, factory) {
   var nestedSort = /*#__PURE__*/function () {
-    function nestedSort(opt) {
+    function nestedSort() {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref$droppingEdge = _ref.droppingEdge,
+          droppingEdge = _ref$droppingEdge === void 0 ? 15 : _ref$droppingEdge,
+          el = _ref.el;
+
       _classCallCheck(this, nestedSort);
 
-      opt = opt || {}; // private data
-
-      this.selector = opt.selector || '';
+      this.selector = el;
       this.sortableList = null;
@@ -42,3 +45,9 @@ this.placeholderUl = null;
       this.targetedNode = null;
+      this.targetNode = {
+        X: null,
+        Y: null
+      };
       this.distances = {
+        droppingEdge: droppingEdge,
+        droppingEdgeNegative: droppingEdge * -1,
         mouseTo: {
@@ -53,10 +62,11 @@ targetedElTop: undefined
       };
-      this.cursorX = null;
-      this.cursorY = null;
-      this.targetedNodeX = null;
-      this.targetedNodeY = null;
-      this.dropEvent = new Event('drop');
-      this.selector = opt.el;
-      this.distances.droppingEdge = opt.droppingEdge || 15;
-      this.distances.droppingEdgeNegative = this.distances.droppingEdge * -1;
+      this.cursor = {
+        X: null,
+        Y: null
+      };
+      this.classNames = {
+        dragged: 'ns-dragged',
+        placeholder: 'ns-placeholder',
+        targeted: 'ns-targeted'
+      };
       this.initDragAndDrop();
@@ -70,4 +80,3 @@ }
 
-        document.addEventListener('dragover', this.dragListener.bind(this), false); // document.addEventListener('touchmove', this.dragListener.bind(this), false);
-
+        document.addEventListener('dragover', this.dragListener.bind(this), false);
         this.initPlaceholderList();
@@ -77,37 +86,82 @@ this.sortableList = document.getElementById(this.selector);
           el.setAttribute('draggable', 'true');
-          el.addEventListener('dragstart', _this.onDragStart.bind(_this), false); // el.addEventListener('touchstart', onDragStart, false);
+          el.addEventListener('dragstart', _this.onDragStart.bind(_this), false);
+          el.addEventListener('dragenter', _this.onDragEnter.bind(_this), false);
+          el.addEventListener('dragend', _this.onDragEnd.bind(_this), false);
 
-          el.addEventListener('dragenter', _this.onDragEnter.bind(_this), false); // el.addEventListener('dragexit', removeStyles, false);
-
-          el.addEventListener('dragleave', _this.onDragLeave.bind(_this), false);
-          el.addEventListener('dragend', _this.onDragEnd.bind(_this), false);
-          el.addEventListener('drop', _this.onDrop.bind(_this), false);
+          _this.addListItemStyles(el);
         });
       }
     }, {
+      key: "getComputedStyleValue",
+      value: function getComputedStyleValue(el, prop) {
+        return window.getComputedStyle(el, null).getPropertyValue(prop);
+      }
+    }, {
+      key: "addListItemStyles",
+      value: function addListItemStyles(li) {
+        // let's add a move cursor icon if it does not already have a cursor css property
+        var cursor = this.getComputedStyleValue(li, 'cursor');
+
+        if (!cursor || cursor === 'auto') {
+          li.style.cursor = 'move';
+        }
+      }
+    }, {
       key: "onDragStart",
       value: function onDragStart(e) {
         this.draggedNode = e.target;
-        this.draggedNode.classList.add('dragged');
+        this.draggedNode.classList.add(this.classNames.dragged);
         e.dataTransfer.setData('text', 'Drag started!'); // Hack for Firefox!
       }
     }, {
+      key: "onDragOver",
+      value: function onDragOver(e) {
+        e.preventDefault(); // prevent default to allow drop
+      }
+    }, {
       key: "onDragEnter",
       value: function onDragEnter(e) {
-        e.preventDefault();
+        if (['LI', 'UL'].includes(e.target.nodeName)) {
+          e.preventDefault(); // prevent default to allow drop
 
-        if (['LI', 'UL'].indexOf(e.target.nodeName) > -1) {
+          if (this.targetedNode) this.targetedNode.classList.remove(this.classNames.targeted);
           this.targetedNode = e.target;
+          e.target.classList.add(this.classNames.targeted);
+          e.target.addEventListener('dragover', this.onDragOver.bind(this), false);
+          e.target.addEventListener('drop', this.onDrop.bind(this), false);
+          e.target.addEventListener('dragleave', this.onDragLeave.bind(this), false);
         }
       }
     }, {
+      key: "onDragLeave",
+      value: function onDragLeave(e) {
+        e.preventDefault();
+        e.target.removeEventListener('dragover', this.onDrop);
+        e.target.removeEventListener('drop', this.onDrop);
+        e.target.removeEventListener('dragleave', this.onDragLeave);
+      }
+    }, {
+      key: "onDragEnd",
+      value: function onDragEnd(e) {
+        e.preventDefault();
+        this.draggedNode.classList.remove(this.classNames.dragged);
+        this.targetedNode.classList.remove(this.classNames.targeted);
+        this.cleanupPlaceholderLists();
+      }
+    }, {
+      key: "onDrop",
+      value: function onDrop(e) {
+        e.preventDefault();
+        this.maybeDrop();
+        this.cleanupPlaceholderLists();
+      }
+    }, {
       key: "dragListener",
       value: function dragListener(e) {
-        this.updateCoordinations(e);
+        this.updateCoordination(e);
         this.managePlaceholderLists(e);
-        this.dropIf(e);
       }
     }, {
-      key: "updateCoordinations",
-      value: function updateCoordinations(e) {
+      key: "updateCoordination",
+      value: function updateCoordination(e) {
         this.calcMouseCoords(e);
@@ -117,4 +171,4 @@ this.calcMouseToTargetedElDist();
     }, {
-      key: "dropIf",
-      value: function dropIf(e) {
+      key: "maybeDrop",
+      value: function maybeDrop(e) {
         if (!this.canBeDropped()) {
@@ -124,17 +178,15 @@ return;
 
+        var dropLocation;
+
         if (this.targetedNode.nodeName === 'LI' && !this.cursorIsIndentedEnough()) {
-          if (this.distances.mouseTo.targetedElTop < 0 && this.distances.mouseTo.targetedElTop > this.distances.droppingEdgeNegative // && mouseHasMovedUp()
-          ) {
-              this.dropTheItem('before');
-            } else if (this.distances.mouseTo.targetedElBot < 0 && this.distances.mouseTo.targetedElBot > this.distances.droppingEdgeNegative // && mouseHasMovedDown()
-          ) {
-              this.dropTheItem('after');
-            }
+          dropLocation = 'before';
         } else if (this.targetedNode.nodeName === 'UL') {
-          this.dropTheItem('inside');
+          dropLocation = 'inside';
         }
+
+        if (dropLocation) this.dropTheItem(dropLocation, e);
       }
     }, {
       key: "dropTheItem",
-      value: function dropTheItem(place) {
+      value: function dropTheItem(place, e) {
         switch (place) {
@@ -153,4 +205,2 @@ case 'before':
         }
-
-        this.draggedNode.dispatchEvent(this.dropEvent);
       }
@@ -160,7 +210,5 @@ }, {
       value: function calcMouseCoords(e) {
-        // cursorX = e.screenX;
-        // cursorY = e.screenY;
         // we're having the client coords because on the next lines, we use getBoundingClientRect which behaves in the same way
-        this.cursorX = e.clientX;
-        this.cursorY = e.clientY;
+        this.cursor.X = e.clientX;
+        this.cursor.Y = e.clientY;
       }
@@ -175,5 +223,5 @@ }, {
         var offset = this.targetedNode.getBoundingClientRect();
-        this.targetedNodeX = offset.left;
-        this.targetedNodeY = offset.top;
-        var result = this.targetedNodeY - this.cursorY;
+        this.targetNode.X = offset.left;
+        this.targetNode.Y = offset.top;
+        var result = this.targetNode.Y - this.cursor.Y;
         this.distances.mouseTo.targetedElTop = result;
@@ -185,14 +233,2 @@ this.distances.mouseTo.targetedElTopAbs = Math.abs(result);
     }, {
-      key: "onDragLeave",
-      value: function onDragLeave(e) {
-        e.preventDefault();
-      }
-    }, {
-      key: "onDragEnd",
-      value: function onDragEnd(e) {
-        e.preventDefault();
-        this.draggedNode.classList.remove('dragged');
-        this.cleanupPlaceholderLists();
-      }
-    }, {
       key: "areNested",
@@ -211,18 +247,8 @@ value: function areNested(child, parent) {
       value: function cursorIsIndentedEnough() {
-        return this.cursorX - this.targetedNodeX > 50;
+        return this.cursor.X - this.targetNode.X > 50;
       }
     }, {
-      key: "mouseHasMovedUp",
-      value: function mouseHasMovedUp() {
-        return this.draggedNode.getBoundingClientRect().top > this.cursorY;
-      }
-    }, {
-      key: "mouseHasMovedDown",
-      value: function mouseHasMovedDown() {
-        return !this.mouseHasMovedUp();
-      }
-    }, {
       key: "mouseIsTooCloseToTop",
       value: function mouseIsTooCloseToTop() {
-        return this.cursorY - this.targetedNodeY < this.distances.droppingEdge;
+        return this.cursor.Y - this.targetNode.Y < this.distances.droppingEdge;
       }
@@ -253,5 +279,2 @@ }, {
               break;
-
-            default:
-              return;
           }
@@ -263,3 +286,3 @@ });
       value: function targetedNodeIsPlaceholder() {
-        return this.targetedNode.nodeName === 'UL' && this.targetedNode.classList.contains('placeholder');
+        return this.targetedNode.nodeName === 'UL' && this.targetedNode.classList.contains(this.classNames.placeholder);
       }
@@ -288,10 +311,19 @@ }, {
       value: function addPlaceholderList() {
-        this.targetedNode.appendChild(this.getPlaceholderList());
+        var list = this.getPlaceholderList();
+        list.style.minHeight = '0';
+        this.targetedNode.appendChild(list);
+        list.style.transition = 'min-height ease .2s';
+        list.style.minHeight = "".concat(this.draggedNode.offsetHeight, "px");
       }
     }, {
+      key: "targetNodeIsIdentified",
+      value: function targetNodeIsIdentified() {
+        return !!this.targetedNode;
+      }
+    }, {
       key: "canBeDropped",
       value: function canBeDropped() {
         var result = true;
-        result &= !!this.targetedNode && this.targetedNode !== this.draggedNode;
-        result &= !(this.targetedNode.nodeName === 'UL' && this.targetedNode.querySelectorAll('li').length);
+        result &= this.targetNodeIsIdentified() && this.targetedNode !== this.draggedNode;
+        result &= this.targetNodeIsIdentified() && !(this.targetedNode.nodeName === 'UL' && this.targetedNode.querySelectorAll('li').length);
         result &= !this.areNested(this.targetedNode, this.draggedNode);
@@ -303,7 +335,9 @@ return result;
       value: function cleanupPlaceholderLists() {
+        var _this3 = this;
+
         this.sortableList.querySelectorAll('ul').forEach(function (ul) {
           if (!ul.querySelectorAll('li').length) {
             ul.remove();
-          } else if (ul.classList.contains('placeholder')) {
-            ul.classList.remove('placeholder');
+          } else if (ul.classList.contains(_this3.classNames.placeholder)) {
+            ul.classList.remove(_this3.classNames.placeholder);
           }
@@ -316,3 +350,3 @@ });
         this.placeholderUl = document.createElement('ul');
-        this.placeholderUl.classList.add("placeholder");
+        this.placeholderUl.classList.add(this.classNames.placeholder);
       }
@@ -325,7 +359,2 @@ }, {
       }
-    }, {
-      key: "onDrop",
-      value: function onDrop() {
-        this.cleanupPlaceholderLists();
-      }
     }]);
@@ -332,0 +361,0 @@

package.json

 {
   "name": "nested-sort",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "author": "Hesam Bahrami (Genzo)",
@@ -5,0 +5,0 @@ "description": "A JavaScript library to create a nested list of elements",

No alert changes

Improved metrics

Total package byte prevSize

30003

increased by7.02%

Lines of code

789

increased by7.49%

No dependency changes