Fix Pull Request dbushell#170 (Restrict Level Change)

Following Pull Request dbushell#170 and added fix to allow an item to be dragged onto a different parent which doesn't already have children. Also fixed syntax error on line 143.
chewmunyoke · Oct 27, 2016 · 2ed8c04 · 2ed8c04
1 parent 4f93032
commit 2ed8c04
Showing 1 changed file with 69 additions and 26 deletions.
diff --git a/jquery.nestable.js b/jquery.nestable.js
@@ -27,23 +27,25 @@
     })();
 
     var defaults = {
-            listNodeName    : 'ol',
-            itemNodeName    : 'li',
-            rootClass       : 'dd',
-            listClass       : 'dd-list',
-            itemClass       : 'dd-item',
-            dragClass       : 'dd-dragel',
-            handleClass     : 'dd-handle',
-            collapsedClass  : 'dd-collapsed',
-            placeClass      : 'dd-placeholder',
-            noDragClass     : 'dd-nodrag',
-            emptyClass      : 'dd-empty',
-            expandBtnHTML   : '<button data-action="expand" type="button">Expand</button>',
-            collapseBtnHTML : '<button data-action="collapse" type="button">Collapse</button>',
-            group           : 0,
-            maxDepth        : 5,
-            threshold       : 20
-        };
+        listNodeName    : 'ol',
+        itemNodeName    : 'li',
+        rootClass       : 'dd',
+        listClass       : 'dd-list',
+        itemClass       : 'dd-item',
+        dragClass       : 'dd-dragel',
+        handleClass     : 'dd-handle',
+        collapsedClass  : 'dd-collapsed',
+        placeClass      : 'dd-placeholder',
+        noDragClass     : 'dd-nodrag',
+        emptyClass      : 'dd-empty',
+        expandBtnHTML   : '<button data-action="expand" type="button">Expand</button>',
+        collapseBtnHTML : '<button data-action="collapse" type="button">Collapse</button>',
+        group           : 0,
+        maxDepth        : 5,
+        threshold       : 20,
+        allowDecrease   : true,
+        allowIncrease   : true
+    };
 
     function Plugin(element, options)
     {
@@ -140,7 +142,7 @@
         {
             var data,
                 depth = 0,
-                list  = this;
+                list  = this,
                 step  = function(level, depth)
                 {
                     var array = [ ],
@@ -231,13 +233,20 @@
             });
         },
 
+        isParent: function(li)
+        {
+            return (li.find('button[data-action]').length != 0);
+        },
+
         setParent: function(li)
         {
-            if (li.children(this.options.listNodeName).length) {
-                li.prepend($(this.options.expandBtnHTML));
-                li.prepend($(this.options.collapseBtnHTML));
+            if (!this.isParent(li)) {
+                if (li.children(this.options.listNodeName).length) {
+                    li.prepend($(this.options.expandBtnHTML));
+                    li.prepend($(this.options.collapseBtnHTML));
+                }
+                li.children('[data-action="expand"]').hide();
             }
-            li.children('[data-action="expand"]').hide();
         },
 
         unsetParent: function(li)
@@ -358,8 +367,9 @@
                 // reset move distance on x-axis for new phase
                 mouse.distAxX = 0;
                 prev = this.placeEl.prev(opt.itemNodeName);
+
                 // increase horizontal level if previous sibling exists and is not collapsed
-                if (mouse.distX > 0 && prev.length && !prev.hasClass(opt.collapsedClass)) {
+                if (opt.allowIncrease && mouse.distX > 0 && prev.length && !prev.hasClass(opt.collapsedClass)) {
                     // cannot increase level when item above is collapsed
                     list = prev.find(opt.listNodeName).last();
                     // check if depth limit has reached
@@ -378,8 +388,9 @@
                         }
                     }
                 }
+
                 // decrease horizontal level
-                if (mouse.distX < 0) {
+                if (opt.allowDecrease && mouse.distX < 0) {
                     // we can't decrease a level if an item preceeds the current one
                     next = this.placeEl.next(opt.itemNodeName);
                     if (!next.length) {
@@ -420,17 +431,49 @@
              * move vertical
              */
             if (!mouse.dirAx || isNewRoot || isEmpty) {
+            	// get previously hovered element based on direction of mouse movement
+                if (mouse.dirY == 1) {
+                    prev = this.pointEl.prev(opt.itemNodeName);
+                } else if (mouse.dirY == -1) {
+                    prev = this.pointEl.next(opt.itemNodeName);
+                }
+
                 // check if groups match if dragging over new root
                 if (isNewRoot && opt.group !== pointElRoot.data('nestable-group')) {
                     return;
                 }
                 // check depth limit
+                var currentDepth = this.placeEl.parents(opt.listNodeName).length;
                 depth = this.dragDepth - 1 + this.pointEl.parents(opt.listNodeName).length;
+
                 if (depth > opt.maxDepth) {
                     return;
                 }
+
+                if (!opt.allowIncrease && currentDepth < depth) {
+                    return;
+                }
+
+                if (!opt.allowDecrease && currentDepth > depth) {
+                    // set parent for currently hovered element
+                    list = this.pointEl.find(opt.listNodeName).last();
+                    if (!list.length) {
+                        list = $(document.createElement(opt.listNodeName)).addClass(opt.listClass);
+                    }
+                    list.append(this.placeEl);
+                    this.pointEl.append(list);
+                    this.setParent(this.pointEl);
+
+                    // unset parent for previously hovered element
+                    if (prev != undefined && this.isParent(prev) && prev.find(opt.listNodeName).children().length == 0) {
+                        this.unsetParent(prev);
+                    }
+
+                    return;
+                }
+
                 var before = e.pageY < (this.pointEl.offset().top + this.pointEl.height() / 2);
-                    parent = this.placeEl.parent();
+                parent = this.placeEl.parent();
                 // if empty create new list to replace empty placeholder
                 if (isEmpty) {
                     list = $(document.createElement(opt.listNodeName)).addClass(opt.listClass);
@@ -481,4 +524,4 @@
         return retval || lists;
     };
 
-})(window.jQuery || window.Zepto, window, document);
+})(window.jQuery || window.Zepto, window, document);