I’m trying to set a specific functionality using jquery sortable. I seem to be close but hitting an issue. I need the subitems to move to level 3 positions only – under the account types
http://jsfiddle.net/Davos8549/x6f0upng/1/
I only want the sub items to be able to drag – drop into other lists that has the class=”hasItems”
I should still be able to move AR, VZ, BANK within its main container “Asset”. But i should not be able to drop the whole thing into a sublist (which is the problem i’m having now).
Asset AR subitem2-1 subitem3-15 subitem3-25 subitem2-2 subitem2-3 subitem2-4 VZ subitem3-1 subitem3-2 subitem1-35 subitem3-3 subitem3-4 Bank subitem1-1 subitem1-2 subitem3-45 subitem1-3 subitem1-4 Liability Bank5 subitem1-15 subitem1-25 subitem1-45 AR5 subitem2-15 subitem2-25 subitem2-35 subitem2-45 VZ5 subitem3-35
I believe the solution could be in this code:
<script> $(function() { $('ul.mainlist').sortable({ connectWith: 'ul.mainlist', beforeStop: function(ev, ui) { if ($(ui.item).hasClass('hasItems') && $(ui.placeholder).parent()[0] != this) { $(this).sortable('cancel'); } } }); $('ul.sublist').sortable({ connectWith: 'ul.sublist' }); }); </script>
Advertisement
Answer
You need to be more specific with identifying your DOM elements you want to move:
First I’ve made some minor changes to your html, adding the class “group” to the <li>
tag of the groups Bank and Liability, which makes them easier to identify.
I also added the class “connected” to the sublists, which I want to be interchangable, that as an example that you can have both, complete interchangable subitems a well as subitems, which are only sortable within their own group. This class “connected” is used in the sortable()
function connectWith
functionality, see Connect Lists
In case a group gets empty, you need to define a min-height to be able to move items back into that empty group.
then I changed the sortable to:
$(function() { $('li.group ul.sublist').sortable({ }); $('.hasItems ul.sublist').sortable({ connectWith: ".connected" }).disableSelection(); });
which now allows you to move as you requested.
check the fiddle for details or
$(function() { $('li.group ul.sublist').sortable({ }); $('.hasItems ul.sublist').sortable({ connectWith: ".connected" }).disableSelection(); });
body { font-family: Arial, Tahoma, San-Serif; font-size: 12px; } ul { padding: 0; list-style-type: none; } p { margin: 0 0 20px; } ul.mainlist { float: left; margin: 0 20px 0 0; width: 100px; } ul.mainlist li { background: #fff; border: solid 1px #ccc; padding: 10px; width:100%; } ul.sublist { min-height: 35px; background: gold; }
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script> <p>sublists shouldn't be able to be dragged out of their normal list</p> <ul id="list1" class='mainlist'> <li class="group">Asset <ul class="sublist"> <li class="hasItems">Bank <ul class="sublist connected"> <li>subitem1-1</li> <li>subitem1-2</li> <li>subitem1-3</li> <li>subitem1-4</li> </ul> </li> <li class="hasItems">AR <ul class="sublist connected"> <li>subitem2-1</li> <li>subitem2-2</li> <li>subitem2-3</li> <li>subitem2-4</li> </ul> </li> <li class="hasItems">VZ <ul class="sublist connected"> <li>subitem3-1</li> <li>subitem3-2</li> <li>subitem3-3</li> <li>subitem3-4</li> </ul> </li> </ul> </li> <li class="group">Liability <ul class="sublist"> <li class="hasItems">Bank5 <ul class="sublist connected"> <li>subitem1-15</li> <li>subitem1-25</li> <li>subitem1-35</li> <li>subitem1-45</li> </ul> </li> <li class="hasItems">AR5 <ul class="sublist"> <li>subitem2-15</li> <li>subitem2-25</li> <li>subitem2-35</li> <li>subitem2-45</li> </ul> </li> <li class="hasItems">VZ5 <ul class="sublist"> <li>subitem3-15</li> <li>subitem3-25</li> <li>subitem3-35</li> <li>subitem3-45</li> </ul> </li> </ul> </li> </ul>