Handle moving between nested list

[morganpizzini]

Expected behavior

In the following template i want to move nested items by keeping depth level.

item
- sub-item
- sub-item
item
- sub-item
- sub-item

Actual behavior

when i start dragging sub-item i can drop at item level.

How i Solved

as this link says I added the part

var itemMoveIn = this.dragEl.find(opt.itemNodeName).data('moveIn');
var listNo = this.pointEl.closest('.dd-list').data('listNo');
if (itemMoveIn !== listNo) {
 return;
}

and use data-list-no and data-move-in for define the "range of motion". now my template is

<ol class="dd-list" data-list-no="1">
      <li class="dd-item schedule" data-move-in="1">
           <ol class="dd-list" data-list-no="2">
                 <li class="dd-item schedule" data-move-in="2"></li>
                 <li class="dd-item schedule" data-move-in="2"></li>
          </ol>
    </li>
     <li class="dd-item schedule" data-move-in="1">
           <ol class="dd-list" data-list-no="2">
                 <li class="dd-item schedule" data-move-in="2"></li>
                 <li class="dd-item schedule" data-move-in="2"></li>
          </ol>
    </li>
</ol>

sub-item now can be dropped only when list have data-list-no="2"

[RomanBurunkov]

Hi,

It looks like you have used some solution from original nestable.

In nestable 2 you can just use 'beforeDragStop'. It is described in the ReadMe.

[morganpizzini]

Understood, but i use the same model in various pages, and in all of them i have to rewrite 'beforeDragStop' callback, now why 3 rows in plug-in code I can handle it without care about it anymore. mine was just a hint since it was very useful and I can handle the page behavior by html without worrying about the javascript. 😄

[pjona]

@morganpizzini Can you make pull request with this changes?