jquery.uix.multiselect
jquery.uix.multiselect copied to clipboard
yanickrochon
Selected list not in "added order" in sortable mode, plus weird bug.
With the sortable: true option, the selected items can be ordered with drag & drop withing the selected list.
However, when adding items, either by click or by drag & drop from the available list to the selected list, the new items are added at their original place in the
In some cases, dropping an item between existing items gives very weird results.
Example:
$('#myselect').multiselect({ sortable: true });
the select has 3 avalable options, A, B and C in this order. I click on C, then B, then A: the selected list is however: A, B, C. Expected: the selected list is : C, B, A (click order).
Same thing if I manually insert an option by drag&drop, it stills use the original order.
Now if I reload the page, add A and B by clicking or d&d, and then drop C between A and B, then C is displayed in both available and selected lists!
I just tried to reproduce what you've described last and (using your example) I know about the C option being visible after drag&drop, it is a behaviour of jQuery droppable being fired only after the element is done dropping. So the original element is temporarily visible in the available list, but should "disappear" when it is dropped. If you're saying that the element remains visible in the selected list, then this is a problem but it does not happen in Chrome. (I don't have my dev machine, so I can't test it with much more browsers right now.)
As for item selection and sortable: true, I think you may have a point that items should be appended, and not sorted when selecting an item. It would also help resolving (I think) the issue #11. It is worth investigating.
I did it again, it depends on which order the items are added.
It seems that the exact steps are, from a list containing A, B, C (in this order):
- d&d C to the selected list
- d&d B: it is inserted before C (original order)
- d&d A between B and C: a grayed B item is added to the selected list, and a plain B item remains in the available list.
Even with the first version of this widget, there was issues with jQuery UI's drag and drop mixed with droppable.... No worries, thank you for a reproducible example.
As you can see with the number of commit I can push these days, I'm quite busy with work at the moment. However, most opened issues will get resolved this summer by me, or by whoever wants to provide a PR for any of them. For the latter, I will gladly review any PR and merge otherwise.
Hi Yanick. I'm currently solving this problem by adding the option
appendToEndOfSelected: false, // if elements should be appended to the end of the selected list
I use this in the _appendToList function like so (currently around line 930):
var insertIndex = eData.index - 1;
// Using jQuery to find the last selected element to append to
var lastOption = $(".option-selected:last",gDataDst.listContainer);
if (that._widget.options.appendToEndOfSelected && lastOption.length > 0) {
insertIndex = lastOption.data("element-index");
}
else {
while ((insertIndex >= gData.startIndex) && (this._elements[insertIndex].selected != eData.selected)) {
insertIndex--;
}
}
You can probably think of a better solution, but figured I'd send this your way. I can also try creating a pull request if you'd like.
As always, thanks for the great plugin!
@lebolo Thanks for providing the appendToEndOfSelected code. This is exactly the feature I was looking for and it works great for me. It seems to me that when allowing users to order the selections, it makes the most sense to add new items always to the end of the list and not in the middle of already-sorted items. Thanks again, and thanks to @yanickrochon for the excellent control!
