Introduction:
i have modified the original lib, by adding many options will give you the right to customise the way it works.
i basically, added many options, see it here:
hasDeselector: true, // add a deselector button
deselectFromDeselectorOnly: false, // valid only is it has Deselector set to true. it makes deselecting works only when clicking in button
customDeselector: htmlCode , // should receive a html code, for deselector button. NO <div> should be used, car it's inserted inside <span> element
hasDragHandler: true, // add a drag button to the left
dragHandlerClass: 'selected-li-drag-handler', // add a class, that should be related to handle option of the sortable plugin
customDragHandler: htmlCode, // should receive a html code, for deselector button. NO <div> should be used, car it's inserted inside <span> element
hasSelector: true, // add a selector button
selectFromSelectorOnly: true, // valid only is it has Selector set to true. it makes selecting works only when clicking in button
customSelector: htmlCode,// should receive a html code, for deselector button. NO <div> should be used, car it's inserted inside <span> element

#Example 1: default lib as Loodev made, with adding sortable. no custom options, will make is work as default.

$('#my-select-1').multiSelect({ afterInit: function (container) { container.find('.ms-selection > .ms-list').addClass('sortable'); // must follow the element sortable('#ms-my-select-1 .ms-selection > .ms-list.sortable', { forcePlaceholderSize: true, placeholderClass: 'bg-yellow', // handle: '.selected-li-drag-handler', // target the `dragHandlerClass` option value, if not set, all the item will be draggable }); } });

#Example 2: adding sortable dragger, items will be dragged only from that dragger. `handle` option in sortable, is what make dragging from there only!!

$('#my-select-2').multiSelect({ hasDragHandler: true, dragHandlerClass: 'drag-handler', afterInit: function (container) { container.find('.ms-selection > .ms-list').addClass('sortable'); // must follow the element sortable('#ms-my-select-2 .ms-selection > .ms-list.sortable', { forcePlaceholderSize: true, placeholderClass: 'bg-yellow', handle: '.drag-handler', // target the `dragHandlerClass` option value, if not set, all the item will be draggable }); } });

#Example 3: adding sortable dragger, selectable button, deselectable button.

$('#my-select-3').multiSelect({ hasDeselector: true, // valid only is it has Deselector set to true deselectFromDeselectorOnly: false, hasDragHandler: true, dragHandlerClass: 'drag-handler', hasSelector: true, // valid only is it has Selector set to true selectFromSelectorOnly: false, afterInit: function (container) { container.find('.ms-selection > .ms-list').addClass('sortable'); // must follow the element sortable('#ms-my-select-3 .ms-selection > .ms-list.sortable', { forcePlaceholderSize: true, placeholderClass: 'bg-yellow', }); } });

#Example 4: customise action buttons. any html code can be used, but only in <span> tag. in this example, i used bootstrap and fontawesome.

$('#my-select-4').multiSelect({ hasDeselector: true, // valid only is it has Deselector set to true deselectFromDeselectorOnly: false, customDeselector: '<span style="padding: 0px 5px;"><a class="btn btn-danger btn-icon btn-circle btn-xs text-white " style="padding:0px"><i class="fas fa-minus "></i></a></span>', hasDragHandler: true, dragHandlerClass: 'selected-li-drag-handler', customDragHandler: '<span style="padding: 0px 5px 0px 0px;"><a class="btn btn-primary btn-icon btn-circle btn-xs text-white " style="padding:0px"><i class="fas fa-sort fa-2x "></i></a></span>', hasSelector: true, // valid only is it has Selector set to true selectFromSelectorOnly: false, customSelector: '<span style="padding: 0px 5px;"><a class="btn btn-success btn-icon btn-circle btn-xs text-white " style="padding:0px"><i class="fas fa-plus "></i></a></span>', afterInit: function (container) { container.find('.ms-selection > .ms-list').addClass('sortable'); // must follow the element sortable('#ms-my-select-4 .ms-selection > .ms-list.sortable', { forcePlaceholderSize: true, placeholderClass: 'bg-yellow', }); } });

#Example 5: make selecting, deselecting, works from buttons only!
NOTE: sorting from the button only is related to sorltable plugin, see #Example 2.

$('#my-select-5').multiSelect({ hasDeselector: true, // valid only is it has Deselector set to true deselectFromDeselectorOnly: true, customDeselector: '<span style="padding: 0px 5px;"><a class="btn btn-danger btn-icon btn-circle btn-xs text-white " style="padding:0px"><i class="fas fa-minus "></i></a></span>', hasDragHandler: true, dragHandlerClass: 'selected-li-drag-handler', customDragHandler: '<span style="padding: 0px 5px 0px 0px;"><a class="btn btn-primary btn-icon btn-circle btn-xs text-white " style="padding:0px"><i class="fas fa-sort fa-2x "></i></a></span>', hasSelector: true, // valid only is it has Selector set to true selectFromSelectorOnly: true, customSelector: '<span style="padding: 0px 5px;"><a class="btn btn-success btn-icon btn-circle btn-xs text-white " style="padding:0px"><i class="fas fa-plus "></i></a></span>', afterInit: function (container) { container.find('.ms-selection > .ms-list').addClass('sortable'); // must follow the element sortable('#ms-my-select-5 .ms-selection > .ms-list.sortable', { forcePlaceholderSize: true, placeholderClass: 'bg-yellow', }); } });