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',
});
}
});