Breaking News: Grepper is joining You.com. Read the official announcement!

javascript select2 sortable

Jerome Choo answered on February 17, 2021 Popularity 6/10 Helpfulness 4/10

answer javascript select2 sortable

javascript select2 sortable

Comment

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

Popularity 6/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Feb 17 2021

Jerome Choo

0 Answers Avg Quality 2/10

javascript select2 sortable

Contents

More Related Answers

javascript select2 sortable

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.