Implementing Sortable Selected-Items

[jaygeek]

The thing I like about multiselect-2 is that it doesn't have this bug: michael/multiselect#8

...but, alas, I need to implement Sortable, so that the Selected-items may be re-ordered. Any tips on how this may be done?
The jQueryUI site wasn't helpful: http://jqueryui.com/demos/sortable/

(I have altered the code & CSS to swap left/right sides, since it seemed backward to our standard needs. Perhaps some day, we can build in a toggle setting to support both, complete with switching the arrow icons from the sprite.)

[yanickrochon]

Yes, even if I've never needed that feature in any project, I can imagine some use cases where it could be requirement. This feature, however, would require some processing with every re-order, as it implies re-indexing the item in the list.

With the current implementation, this is not possible (it can be done, but requires one to extend the functionality of the widget. Though, I don't think it can be stable enough to be of general use...)

I think I could start a branch to try and implement, and also fix the other single click to select issue (#3), by deactivating animations as they are the root of the problem.

[yanickrochon]

I have looked at this, and how it could be implemented with the current optimized algorithm and it will prove a greater challenge than just applying "sortable" to the container! There are several issues to take into account :

1. this rewrite relies on a single array to index and order items; if one should "sort" them once selected, the original element (SELECT) should be modified to put the selected OPTION element first in the list without modifying the indexed array (so when the item is deselected, it will return to it's original deselected place).
2. if a SELECT element should use OPTGROUP elements to group items, this should also be handled somehow.
   1. It is not possible to re-order OPTGROUP to accomodate the selected (sorted) items as it would be pointless, unless we can even sort OPTGROUP, and apply a second layer of sortable to the group's selected items... and thus creating more potential slow down and unstability...)
   2. selected items may just appear without it's group name in the selected list (as a plain list of selected OPTION elements), this would allow simple sortable on any selected items. The problem with this is that it means moving the OPTION out of it's original OPTGROUP in the original SELECT element to make it submit in the given order. The problem with this is that it breaks the original SELECT element layout in case the destroy() method is invoked. Moving the OPTGROUP is described in point 1, plus adding the possibility of mixed-cross-group-sorted items.

Because, as described, to be submitted in the user defined order, when sorted, the items need to be moved inside the original SELECT element. The goal of this rewrite (multiselect-2) was to offer a simple and complete replacement to the SELECT element. I didn't implement a sortable feature to focus on the core features. And now, adding this functionality, as described above, has these issues.

What do you think?

[yanickrochon]

I think I have a solution for this problem that I'll play with during the holidays, or next month (January). It involves having a separate SELECT element (dynamically created) for the available items and have the original SELECT element for selected items only, discarding OPTGROUP elements. This will allow setting up the jQuery UI Sortable on the list like the version 1 of this widget.

I haven't forgotten about it! Just had a crazy schedule.

[yanickrochon]

Good news! The dev branch now contains this feature. It is not fully tested, and has a known issue, but should be satisfactory to most use cases right now. I'll push it to master once I'm satisfied with testing, then close this issue.

Note that the dev branch has some major code refactoring, but the API has not changed.

[yanickrochon]

This has now been implemented and is stable enough.