Nested Lists - Disable the movement of children from the parent

Question

My list allows children to be moved from the parent, and I want to change it.

As you can see, moving children from within the parent to another parent must be allowed, but moving children outside of any parent should not be allowed.

I think the code will be too long, so here is a nesting list similar to the one I use nestableList from Luna theme , and here is the jquery.nestable.js script

Answer 1

The above example uses the jQuery Nestable plugin from dbushell . Do you have any control over the plugin that you end up using? The project is completely dead and has not been updated for 2 years.

It might be wise to check out a solution that is still supported, and offer your function, which is pretty much the "protectRoot" function that is currently available to many libraries.

If you do not have control over the plugin, this function is not currently implemented and probably will never be.

If you have control over the plugin but still want to use it, the solution may be to use a plug (there is a lot since the project is dead) is still supported and has this feature.

Another solution would be for the cherry to choose the code that interests you from the many migration requests submitted to the project, but it will never be merged.

For example, this pull request adds new callbacks instead of the only one available at the moment: beforeDragStart , dragStart , dragMove , beforeDragEnd , dragEnd , etc. These new callbacks contain many arguments, such as the item you are currently moving, where it was before you started dragging it, and the destination. Based on this new information and especially on the destination, you can cancel the drag and drop if the destination is the root of the node.

 $('.dd').nestable({}) .on('dragMove', function(event, item, source, destination) { // item: item we're moving. // source: original source of the item. // destination: new position of the item. }); 

Another transfer request that can meet your needs is this one . It provides a callback to reject a specific drag event, you can, for example, reject a drag event if the dragged item becomes the root item.

 $('.dd').nestable({ reject: [ { rule: function() { // $(this) refers to the dragged element. // Return TRUE to cancel the drag action. return $(this).parent().hasClass("rootList"); } } ] }); 

Answer 2

Note 1 , before reading this answer, refer to another , it is really useful and helped me a lot. Note 2 , as this answer said, and the author of the original library is the new library
Note 3 , even the new library will not support the rejection of rules, and you still have to use the request to transfer the library.

I had EXACTLY the same case with the finder (and this made me contact us). This is how I solved my problem (and I hope this helps others)

Answer

HTML

 <div class="dd" id="nestable-example"> <ol class="dd-list"> <li class="dd-item" data-id="0" data-type="root"> <div class="dd-handle">Root 0</div> <ol class="dd-list"> <li class="dd-item" data-id="1" data-type="child"> <div class="dd-handle">Child 1</div> </li> <li class="dd-item" data-id="2" data-type="child"> <div class="dd-handle">Child 2</div> </li> <li class="dd-item" data-id="3" data-type="child"> <div class="dd-handle">Child 2</div> </li> </ol> </li> <li class="dd-item" data-id="4" data-type="root"> <div class="dd-handle">Root 4</div> <ol class="dd-list"> <li class="dd-item" data-id="5" data-type="child"> <div class="dd-handle">Child 5</div> </li> <li class="dd-item" data-id="6" data-type="child"> <div class="dd-handle">Child 6</div> </li> </ol> </li> </ol> </div> 

Javascript

 $('#nestable-example').nestable({ group: 'categories', // you can change this name as you like maxDepth: 2, // this is important if you have the same case of the question reject: [{ rule: function () { // The this object refers to dragRootEl ie the dragged element. // The drag action is cancelled if this function returns true var ils = $(this).find('>ol.dd-list > li.dd-item'); for (var i = 0; i < ils.length; i++) { var datatype = $(ils[i]).data('type'); if (datatype === 'child') return true; } return false; }, action: function (nestable) { // This optional function defines what to do when such a rule applies. The this object still refers to the dragged element, // and nestable is, well, the nestable root element alert('Can not move this item to the root'); } }] }); 

Answer 3

I cannot find a suitable solution with all the nested tensile requests and the nested one itself. I came across this extension for jQuery-UI sortable. Here you have the protectRoot property. This works great. Code example:

HTML

 <ol class="sortable"> <li><div>Some content</div></li> <li> <div>Some content</div> <ol> <li><div>Some sub-item content</div></li> <li><div>Some sub-item content</div></li> </ol> </li> <li><div>Some content</div></li> </ol> 

Javascript

 $('.sortable').nestedSortable({ handle: 'div', items: 'li', toleranceElement: '> div', protectRoot: true, maxLevels: 2 });