I am using https://github.com/RamonSmit/Nestable for drag n drop list items within the ordered-list.
I have taken js and css from:-
https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.5.0/jquery.nestable.css https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.5.0/jquery.nestable.js
Following is the ordered list that I have created:-
<div class="dd">
<ol class="dd-list">
<li class="dd-item" data-id="1" data-type="Chapter">
<div class="dd-handle">Item 1</div>
</li>
<li class="dd-item" data-id="2" data-type="Chapter">
<div class="dd-handle">Item 2</div>
</li>
<li class="dd-item" data-id="3"data-type="Chapter">
<div class="dd-handle">Item 3</div>
<ol class="dd-list">
<li class="dd-item" data-id="4" data-type="Title">
<div class="dd-handle">Item 4</div>
</li>
<li class="dd-item" data-id="5" data-type="Title">
<div class="dd-handle">Item 5</div>
</li>
</ol>
</li>
</ol>
</div>
$('.dd').nestable({ maxDepth: 2 });
I required only two levels for depth. At first level of depth I will have parents and at second level of depth I required titles. Now I required to drag n drop title from one chapter to another but I required to stop chapters to be dragged within another chapter. So that I can retain the title as title and chapter as chapter after drag n drop.
I tried lot of hit-n-trials along with nestable methods but could not figure it out. If anybody can help me out.
Can we get the depth of list-item which is going to be dropped. Also somehow if we can get the depth of destination. This way we can check if both depth(s) are same or not. If same we will allow drop other wise we will return false.
来源:https://stackoverflow.com/questions/46548575/how-to-move-list-items-between-same-depth-for-nestable-list