Select2 拖放排序答案

【问题标题】：Select2 with Drag and Drop SortingSelect2 拖放排序
【发布时间】：2014-08-16 21:56:01
【问题描述】：

Select2 (v3.5.1) 具有拖放功能，但仅限于“输入”字段。我需要一个值/文本组合，所以只有一个选择框对我来说是正确的选择。

我在这里找到了我的问题的（部分）解决方案：http://joevanderjagt.com/better-multiple-select-with-sorting/

但是，它有一个错误。它在排序标签上工作正常，但如果用户只添加标签而不排序，它就不行了。我创建了一个 jsfiddle：http://jsfiddle.net/s8v3su36/

<select id="test" size="1" multiple="multiple" style="width:400px">
    <option value="a">AAA</option>
    <option value="b">BBB</option>
    <option value="c">CCC</option>    
</select>

(function($){
    $.fn.extend({
        select2_sortable: function(){
            var select = $(this);
            $(select).select2();
            var ul = $(select).prev('.select2-container').first('ul');
            ul.sortable({
                placeholder : 'ui-state-highlight',
                forcePlaceholderSize: true,
                items       : 'li:not(.select2-search-field)',
                tolerance   : 'pointer',
                stop: function() {
                    $($(ul).find('.select2-search-choice').get().reverse()).each(function() {
                        var id = $(this).data('select2Data').id;
                        var option = select.find('option[value="' + id + '"]')[0];
                        $(select).prepend(option);
                    });
                }
            });
        }
    });

    $('#test').select2_sortable();
}(jQuery));

添加第一个“CCC”，现在添加“BBB”，然后按调试按钮。你会看到订单 "AAA, BBB, CCC" 但必须是 "CCC,BBB,AAA"

现在使用拖放移动“BBB”作为第一个条目。再次点击调试按钮，看到正确的顺序“BBB,CCC,AAA”。

有人可以帮忙吗？我希望添加一个条目也在选择中对选项进行排序。 :)

可能的解决方案：http://jsfiddle.net/s8v3su36/4/

【问题讨论】：

标签： jquery-select2

【解决方案1】：

使用 vue.js - 请考虑使用此组件（页面紧凑，即使选项列表很长也可以轻松使用）：

https://www.npmjs.com/package/vue-libs-multi-select-with-order

【讨论】：

【解决方案2】：

您的神奇调试按钮仅输出 <select> 子级，当页面首次加载或您向 select2 div 添加选项时，这些子级保持不变。

只有在您停止拖动后，stop 函数才会执行并重新排列 <option> 标记。

尝试在add 事件中重新排序您的<select>。

【讨论】：

是的，我知道只有在停止事件之后，选项才会重新排列。但是这里最好的选择方法是什么？

【解决方案3】：

添加：

$(select).on("change", function(e)
{
    if (e.added)
    {
        var select = $(this);
        var ul = $(select).prev('.select2-container').first('ul');
        $($(ul).find('.select2-search-choice').get().reverse()).each(function() {
            var id = $(this).data('select2Data').id;
            var option = select.find('option[value="' + id + '"]')[0];
            $(select).prepend(option);
        });
    }
});

【讨论】：

纯代码答案在 Stackoverflow 上的价值很低，因为它们对教育/授权成千上万的未来研究人员几乎没有作用。

【解决方案4】：

我重写了 (@ambroiseRabier) 的代码。我的代码更干净，不要使用 $(ul).find 来查找选定的选项。相反，它使用传递的 ui 元素来查找需要更新的选定选项和原始选择元素。如果您在网页中有更多 Select2 实例，则此版本可以正常工作。

(function ($) {
$.fn.select2Sortable = function () {
    this.next().children().children().children().sortable({
        containment: 'parent', stop: function (event, ui) {
            var originalSelectElement = ui.item.parent().parent().parent().parent().prev();
            ui.item.parent().children('[title]').each(function () {
                var title = $(this).attr('title');
                var originalOptionElem = $(originalSelectElement).children('[value="' + title + '"]');
                originalOptionElem.detach();
                $(originalSelectElement).append(originalOptionElem)
            });
            $(originalSelectElement).change();
        }
    });
};
})(jQuery);

【讨论】：