New Option: Sortable

[Mactory]

Adding the ability to sort the selected elements (As requested in #171 ). This requires jQueryUI to be loaded. If it is not loaded, the sortable option is automatically deactivated and a corresponding warning is issued.

[peterfarrell]

We are very interested in seeing this PR merged in. We are currently using the fork version by the original PR submitter. Thank you so much @Mactory !

[christianmagill]

Is this fork still available.

[peterfarrell]

@christianmagill We took the changes from here: https://github.com/NB-Dev/multi-select/

[christianmagill]

Much thanks!

[Mactory]

I merged the newest upstream master into my repo as this PR has not yet been merged.
@lou Is there anything I can do or you want me to change to get this PR merged?

[peterfarrell]

@Mactory thanks for updating your PR. Really looking forward for this to get into master.

[christianmagill]

@Mactory, This PR suffers from a jQuery UI Sortable bug in Firefox (Mac/Win). Dragging and releasing sends a click which in this context unselects the dragged selection.

Apparently the solution is to use the Sortable option

helper : 'clone'

I have yet to confirm this fix.

[carlhussey]

Is there a way to style the handle / cursor on the selection side only? I want to keep the pointer on the left but on the right, when sorting is available, id like it to be a move icon.

[Mactory]

@carlhussey Yes, you can use CSS for this:
.ms-container .ms-list.ui-sortable > li {cursor: move;}
@ALL Do you think this should this be integrated into the pull-request?

[peterfarrell]

@Mactory I think that seems to be a reasonable addition.

[alani1]

@Mactory does this also fire an event when the order is changed? Similar to afterSelect and afterDeselect it would be great to have an afterSort.

[Mactory]

@alani1: Currently the sortable option does not fire a custom event. I use jQueryUI for the sortable option though, which fires a range of events: http://api.jqueryui.com/sortable/
They should be fired on the .ms-selection > ul.ms-list element or your multi-select.

[abscond784]

Any news on this getting merged into master? @lou ?

[chrisbartolo]

@Mactory I'm having some issues when loading the data... Basically the order is not kept when loading the data to it. Any suggestions on how to resolve this? Thanks!

[Mactory]

@chrisbartolo For me, the order of elements are kept. Can you send me a code snippet? I might be able to help you then.

[Cdat24]

Hello, I'm new to GitHub... But, I wanted to know if the issue regarding the sortable option returning the sorted order as an array? Any info would be appreciated.

Regards,
Cdat24

[Mactory]

For the multi-select the values are POSTed as an array. The array is ordered in the order that is selected in the widget.

[Cdat24]

Right, I understand that. I guess what I'm getting at is, is there a way to reset or create a new array based on the values after sorting? Thanks for replying. Please forgive confusion on my behalf.

[Mactory]

No worries. I am still unsure what you need though. Do you want one array in the original order and one in the new, sorted order?

[Cdat24]

My apologies, the new sorted order is what I mean.

Regards,
Cdat

[Mactory]

that is exactly what you should get with the sortable option enabled. Under the hood, the plugin re-orders the <option> elements within the <select> element to match the ordering in the widget. The browser then sends the array in the order of the option elements when submitting the form. Or do you need the ordered values in javascript?

[christianmagill]

@Mactory Any suggestions if you need to reload the page with the same sorting in place? I know I could switch the output order of the options, but then the original side would be out of order as options get put disabled.

[christianmagill]

This is what I ended up with.. Could probably use some cleanup.

 afterInit: function (ms) {

                var that = this;
                var values = that.$element.attr('data-selected').split(',');

                var reverse = function (array) {
                    var arrayOne = array
                    var array2 = [];

                    for (var i = arrayOne.length - 1; i >= 0; i--) {
                        array2.push(arrayOne[i])
                    }
                    return array2
                }

                var reversedValues = reverse(values);

                $.each(reversedValues, function (index, value) {
                    that.$element.prepend($select.find('option[value="' + value + '"]'));
                    that.$selectionUl.find('.ms-selected').each(function () {
                        if ($(this).data('ms-value') == value) {
                            that.$selectionUl.prepend($(this));
                            return false;
                        }
                    });
                });
            },

[senthilkumarmohan]

Adding the ability to sort the selected elements (As requested in #171 ). This requires jQueryUI to be loaded. If it is not loaded, the sortable option is automatically deactivated and a corresponding warning is issued.

This was helpful. Thankyou.