JavaScript Select2 Sortable
//CSS Must Include CSS
.sortable {
list-style-type: none;
}
.select2-selection__rendered li.placeholder {
width: 0;
height: 0;
border-bottom: 5px solid transparent !important;
border-top: 5px solid green !important;
border-left: 5px solid transparent !important;
border-right: 5px solid transparent !important;
max-width: 100%;
overflow: hidden;
/*Altered two below to make word wrap work */
word-wrap: normal !important;
white-space: normal;
float: left;
}
$("#selectid").select2(opt);
("#selectid").parent().find(".select2-selection__rendered").sortable({
containment: 'parent',
onDrop: function ($item, container, _super) {
var $clonedItem = $('<li/>').css({ height: 0 });
$item.before($clonedItem);
$clonedItem.animate({ 'height': $item.height() });
$item.animate($clonedItem.position(), function () {
$clonedItem.detach();
_super($item, container);
});
$($("#selectid").parent().find("ul").find('.select2-selection__choice').get().reverse()).each(function () {
var id = $(this).data('data').id;
var option = $(this_val).find('option[value="' + id + '"]')[0];
$("#selectid").prepend(option);
});
$("#selectid").trigger("change");
}
});
Jerome Choo