JAVASCRIPT

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");
    }
});