jQuery UI draggable connectToSortable not obeying sortable items option

Question

I have a jQuery UI draggable connected to a sortable and the sortable uses the items option to limit which items can be sorted. I'm not sure if this is normal behavior or a bug, but I am not able to prevent the draggable from being dropped after non-sortable items.

I set up this JSfiddle to demonstrate the problem: http://jsfiddle.net/agSwn/1/

The draggable cannot be dropped before Item 1 or 2 because they are not sortable. However, the draggable can be dropped after Item 7. Note that if you drop the draggable after Item 3, for example, you then cannot sort that new item after Item 7.

I have exactly the same problem right now, did you find your solution? — d4rky
Have you searched the defect reports for jQuery UI to see if there's an open ticket for this? — eh9

user1827044 user1827044 · Accepted Answer · 2012-11-19T20:27:38

If users really shouldn't be allowed to drop items before 1 and 2, or after 7, maybe these things belong in different lists, since they will always be the first and last items respectively. If you want the look to remain the same you can just tweak the html and css.

<div id='lists'>
   <ul>
      <li class="ui-state-default">Item 1 (not sortable)</li>
      <li class="ui-state-default">Item 2 (not sortable)</li>
   </ul>
   <ul id="sortable">
      <li class="mixable ui-state-default">Item 3 (sortable)</li>
      <li class="mixable ui-state-default">Item 4 (sortable)</li>
   </ul>
   <ul>
      <li class="ui-state-default">Item 5 (not sortable)</li>
      <li class="ui-state-default">Item 6 (not sortable)</li>
      <li class="ui-state-default">Item 7 (not sortable)</li>
   </ul>
</div>

See my example here, it looks jut like yours with the functionality you want: http://jsfiddle.net/dgmCp/1/

jQuery UI draggable connectToSortable not obeying sortable items option

1 Answers