Question

I have a sortable like the 2nd example on this page:

http://jqueryui.com/demos/sortable/items.html

The sortable is a mix of targets:

• Those that can be picked up and rearranged
• Disabled items, which cannot be picked up (but are drop targets).

The problem is in the way the component interprets my intention on sorting. As an example picking up the first element of the following list and dragging it to the fourth position will look like this:

A B C X X ==> B C X A X

Here the X’s denote the disabled items.

In my application I would like the sorting behaviour to be different. When a target is picked up and placed over a disabled item (an X) then the list should not shift along to accomodate the target, but instead the target and the disabled item should swap positions.

Using the same example as before (drag from 1st to 4th):

A B C X X ==> X B C A X

If the drop target is normal (ie not disabled) the behaviour should be the same as before (drag from 1st to 3rd):

A B C X X ==> B C A X X

Think of it like wanting to re-arrange appointments on a calendar, when you pick one up from a date and drop it on an empty date, you wouldn’t want the other appointments to shuffle along by one day.

Answer 1

I’ve put together a jsfiddle with your desired functionality.

Basically I tie into the change function of sortable and I check to see if the element the helper just passed over is disabled. If it is then I move that element to where the helper started from.

Here is the jsfiddle http://jsfiddle.net/YjhzR/3/

Hope this helps!

Update:

http://jsfiddle.net/YjhzR/6/