6

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.

pheelicks
  • 7,461
  • 2
  • 45
  • 50
  • Looks like http://stackoverflow.com/questions/2263687/jquery-sortable-obtain-2-elements-being-swapped – sirhc Nov 14 '11 at 20:57

2 Answers2

5

This will not exactly be an answer to your question, but I think you should not force using a ready solution when it doesn't suit the case.

I think you should create your own control to keep the elements and use jquery-ui's draggables to implement behaviour. Your usecase differs from the example in some basic logic of behaviour.

It would be beneficial for the future also, if you get more requirements.

naugtur
  • 16,827
  • 5
  • 70
  • 113
  • I do agree with you in not forcing a ready made solution to do something it was not designed to do. But, not being a jquery expert I was curious as to whether there was a "nice way" to alter just the sorting logic. sirhc's link looks like a promising starting point for creating a custom control – pheelicks Nov 18 '11 at 06:48
  • I still think it would be more work to do it like you planned. Please report back what you did and if you succeeded. – naugtur Nov 18 '11 at 14:46
  • While Keith did provide a valid solution to my question, after playing with it a bit, it turns out that this is actually a pretty confusing way of re-arranging a list. As such, I'm probably going to go with the Swappable plugin recommended by sirhc – pheelicks Nov 20 '11 at 03:44
2

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/

Keith.Abramo
  • 6,952
  • 2
  • 32
  • 46
  • 1
    If this is what OP wanted (I'm still not exactly sure what is) then congratulations, you deserve the bounty :) On the other hand - when I used your fiddle, the X1 disappeared when I tried to put something next to it and OP showed constant number of option in his examples. – naugtur Nov 19 '11 at 14:00
  • I don't understand your 2 statements "X1 disappeared when I tried to put something next to it". You can only move elements above or below another element in my fiddle. And "OP showed constant number of option in his examples" – Keith.Abramo Nov 19 '11 at 14:38
  • 1
    This is looking very promising, although I'm also seeing something similar to naugtur. Basically, if you drag C on X1, then X1 disappears, resulting in A B C, when the result should be A B X1 C. More generally, it seems to break when you try to swap two adjacent items when one of them is X1. Many thanks for the code though, even currently this is very useful as a start - if you could fix up the bug, the bounty is yours! – pheelicks Nov 19 '11 at 16:24
  • Ahhh, I see what you are saying. Sorry about that. I have updated my answer with the latest fiddle containing the fixed functionality. @naugtur Thank you for pointing out those errors +1. – Keith.Abramo Nov 19 '11 at 18:33