jquery - Select2 4.0 をソート可能にする方法は?

Question

私は新しいバージョン 4.0 でこの問題を抱えていましたが、数時間の作業の後、回避策で解決するまで、答えを見つけることができませんでした。

Answer 1

私の回避策:

まず、jquery でソート可能にします。

$("#mySelect").parent().find("ul.select2-selection__rendered").sortable({
    containment: 'parent',
    update: function() {
        orderSortedValues();
    }
});

関数 orderSortedValues には次の考え方があります: 元の select 入力のオプションの順序を変更し、select2 に新しい順序を通知します。

orderSortedPassageValues = function() {
    $("#mySelect").parent().find("ul.select2-selection__rendered").children("li[title]").each(function(i, obj){
        var element = $("#mySelect").children("option[value="+obj.title+"]");
        moveElementToEndOfParent(element)
    });
};

moveElementToEndOfParent = function(element) {
    var parent = element.parent();

    element.detach();

    parent.append(element);
};

最後に、ドロップダウンから新しい値を選択して自動ソートを停止する必要もあります

stopAutomaticOrdering = function() {    
    $("#mySelect").on("select2:select", function (evt) {
        var id = evt.params.data.id;

        var element = $(this).children("option[value="+id+"]");

        moveElementToEndOfParent(element);

        $(this).trigger("change");
    });
}

PS: 関数のスコープはグローバルです。あなたはそれを変えるかもしれません...他の誰かを助けることを願っています。