Question

How can I define what items to accept in a sortable?

Like, say I have the following pseudo markup:

<ul id="draggable">
   <li>Item 1</li>
   <li>Item 2</li>
   <li class="nodrag">Item 3</li>
   <li>Item 4</li>
</ul>

<ul id="sortable">

</ul>

I use the connectToSortable option in the Draggable to connect it to the sortable.

Since I have sortables within sortables (INCEPTION!! 😉 ) I want to be able to decide if a draggable is allowed to be dropped on a specific sortable.

How can I do this? I currently use the sortable stop event for manipulating the dropped object – I tried removing the object if it contains the nodrag class, but the “snap” effect is still shown (the effect where the draggable slowly moves into place in the sortable)

Is there any way I can do this?

Answer 1

I had a similar problem with a drag-and-drop app I was writing. The problem I had was that I had, say, 3 sortable lists like this:

<ul class="apple">  <!--  accepts apples -->
</ul>

<ul class="apple orange">  <!--  accepts apples and oranges -->
</ul>

<ul class="orange banana">  <!--  accepts oranges and bananas -->
</ul>

Then I had another master list with apples, oranges and bananas that could be dragged into these lists. THe problem was obviously to restrict the draggables so that they can’t be dropped into incompatible lists.

What I had to do was use the connectToSortable option on the draggables to specify which lists they could be dropped into. So I might define my draggables like so:

<li class="drag-apple">...</li>
<li class="drag-orange">...</li>
<li class="drag-banana">...</li>

$(li.drag-apple).draggable({ connectToSortable: '.apple', ... });
$(li.drag-orange).draggable({ connectToSortable: '.orange', ... });
$(li.drag-banana).draggable({ connectToSortable: '.banana', ... });

With this in place, the draggables will only target the appropriate lists.

In your case, I’m not sure if the nested sortables creates additional complexity. However, there is a nested sortables plugin that you might want to look at (nested Sortable). Hopefully similar techniques will work there.