Selected list not in "added order" in sortable mode, plus weird bug.

[michelgre]

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 element.

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!

yanickrochon commented 11 years ago

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.

michelgre commented 11 years ago

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.

yanickrochon commented 11 years ago

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.

michelgre commented 11 years ago

I made a fiddle here: http://jsfiddle.net/3zSQ4/

romeo4934 commented 11 years ago

I have the same problem!

romeo4934 commented 11 years ago

Do you have ETA of the fix ? Thank you very much for your help !

yanickrochon commented 11 years ago

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.

lebolo commented 11 years ago

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!

yanickrochon commented 11 years ago

I'll take a look at it as soon as I can!

HackWeight commented 10 years ago

@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!

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[yanickrochon]

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.

[michelgre]

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.

[yanickrochon]

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.

[michelgre]

I made a fiddle here: http://jsfiddle.net/3zSQ4/

[romeo4934]

I have the same problem!

[romeo4934]

Do you have ETA of the fix ? Thank you very much for your help !

[yanickrochon]

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.

[lebolo]

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!

[yanickrochon]

I'll take a look at it as soon as I can!

[HackWeight]

@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!