Sortable items and subelements in a list on jQuery ui sortable

Question

If you drag any child outside of any parent, its position is preserved. This is a joke. The item should revert to the previous parent item. Elements of the child should be able to move inside the parent and parents. Parent elements must be able to move between them.

Problems:

• How to disable child drag and drop items abroad?
• How to allow parents to drag right? Now, if the first parent is an example, in order to drag it to the place of PARENT No. 2 or PARENT No. 3, this will not move

the code:

<script type="text/javascript" charset="utf-8" src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="http://yandex.st/jquery-ui/1.9.2/jquery-ui.min.js"></script> <script> $(document).ready(function(){ var sortable_element = $('.sortable'); sortable_element.sortable( { items: ".group-caption, .group-caption .group-item", handle: ".move", cursor: "move", opacity: 0.7, containment: ".sortable", placeholder: "movable-placeholder", revert: 300, delay: 150, start: function(e, ui ) { ui.placeholder.height(ui.helper.outerHeight()); } }); }) </script> <style> .sortable { } .group-caption { background: #D3CAAF; width: 400px; display: block; padding: 20px; margin: 0 0 15px 0; } .group-item { background: #5E5E5E; width: 300px; height: 30px; display: block; padding: 3px; margin: 5px; color: #fff; } .move { background: #ff0000; width: 30px; height: 30px; float: right; color: #fff; text-align: center; text-transform: uppercase; line-height: 30px; font-family: Arial; cursor: move; } </style> <div class="sortable"> <div class="group-caption"> <h4>PARENT #1</h4> <div class="move">+</div> <div class="group-items"> <div class="group-item">CHILD #1<div class="move">+</div></div> <div class="group-item">CHILD #2<div class="move">+</div></div> <div class="group-item">CHILD #3<div class="move">+</div></div> <div class="group-item">CHILD #4<div class="move">+</div></div> <div class="group-item">CHILD #5<div class="move">+</div></div> <div class="group-item">CHILD #6<div class="move">+</div></div> <div class="group-item">CHILD #7<div class="move">+</div></div> <div class="group-item">CHILD #8<div class="move">+</div></div> <div class="group-item">CHILD #9<div class="move">+</div></div> <div class="group-item">CHILD #10<div class="move">+</div></div> <div class="group-item">CHILD #11<div class="move">+</div></div> <div class="group-item">CHILD #12<div class="move">+</div></div> <div class="group-item">CHILD #13<div class="move">+</div></div> <div class="group-item">CHILD #14<div class="move">+</div></div> <div class="group-item">CHILD #15<div class="move">+</div></div> <div class="group-item">CHILD #16<div class="move">+</div></div> </div> </div> <div class="group-caption"> <h4>PARENT #2</h4> <div class="move">+</div> <div class="group-items"> <div class="group-item">CHILD #1<div class="move">+</div></div> <div class="group-item">CHILD #2<div class="move">+</div></div> <div class="group-item">CHILD #3<div class="move">+</div></div> <div class="group-item">CHILD #4<div class="move">+</div></div> </div> </div> <div class="group-caption"> <h4>PARENT #3</h4> <div class="move">+</div> <div class="group-items"> <div class="group-item">CHILD #1<div class="move">+</div></div> <div class="group-item">CHILD #2<div class="move">+</div></div> <div class="group-item">CHILD #3<div class="move">+</div></div> <div class="group-item">CHILD #4<div class="move">+</div></div> <div class="group-item">CHILD #5<div class="move">+</div></div> <div class="group-item">CHILD #6<div class="move">+</div></div> <div class="group-item">CHILD #7<div class="move">+</div></div> <div class="group-item">CHILD #8<div class="move">+</div></div> </div> </div> </div> 

Answer 1

If you understand correctly, you need two sortings: one for parents and one for children, and then children must connectWith parents, and you need the tolerance property.

 // Sort the parents $(".sortable").sortable({ containment: "parent", items: "> div", handle: ".move", tolerance: "pointer", cursor: "move", opacity: 0.7, revert: 300, delay: 150, dropOnEmpty: true, placeholder: "movable-placeholder", start: function(e, ui) { ui.placeholder.height(ui.helper.outerHeight()); } }; // Sort the children $(".group-items").sortable({ containment: "parent", items: "> div", tolerance: "pointer", connectWith: '.group-items' }); 

See my demo of the script .

UPDATE # 1

Updated Fiddle demo to allow children to bind to the parent.