Question

有谁知道如何进行多重选择（见下面的HTML）可排序？使用jQuery还是Ext JS？通过排序，我的意思是我可以向上或向下拖动一个项目（一个选项）以在选择控件中重新定位它。

<select id="testing" multiple=multiple>
    <option>First Option</option>
    <option>Second Option</option>
    <option>Third Option</option>
    <option>Forth Option</option>
    <option>5 Option</option>
    <option>6 Option</option>
    <option>7 Option</option>
</select>

Answer 1

jQuery UI具有使事物可排序的功能。请参阅http://jqueryui.com/demos/sortable/。

Answer 2

使用拖放功能无法可靠地执行此操作。 <select multiple>可以使用操作系统选择列表小部件来实现，该小部件通常不会像原生HTML元素那样生成mouse个事件。

你必须用<select>类似物替换<div>，它确实以正常方式提供可排序性，无论你想要使用哪个库/插件。尽管如此，制作一个ersatz - <select>可以很好地访问/使用/可键入是一件很麻烦的事情。大多数插件并没有完全实现。

更简单的替代方案就是单独使用“向上移动”/“向下移动”按钮，这些按钮可在元素中查找并移动选定的<option>。

Answer 3

经过一番研究和搜索，我从互联网上得到了解决方案。请尝试以下方法 -

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#move-up').click(moveUp);
        $('#move-down').click(moveDown);
    });

    function moveUp() {
        $('#selected-items select :selected').each(function(i, selected) {
            if (!$(this).prev().length) return false;
            $(this).insertBefore($(this).prev());
        });
        $('#selected-items select').focus().blur();
    }

    function moveDown() {
        $($('#selected-items select :selected').get().reverse()).each(function(i, selected) {
            if (!$(this).next().length) return false;
            $(this).insertAfter($(this).next());
        });
        $('#selected-items select').focus().blur();
    }
    </script>
    </head>
    <body>
    <div id="selected">
        <div><strong>Selected</strong></div>
        <div id="selected-items">
            <select multiple="multiple" id="selected_fields" name="selected_fields[]">
                <option>one</option>
                <option>two</option>
                <option>three</option>
                <option>four</option>
            </select>
        </div>
    </div>

    <div id="priority">
        <div><input type="button" id="move-up" value="UP" /></div>
        <div><input type="button" id="move-down" value="DOWN" /></div>
    </div>
    </body>
    </html>

Answer 4

✅✅selectize/selectize.js

可以将其附加到文本（自由标记）以及进行选择。我确实有drag_drop和remove_button插件。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
<script>
$(function() {
	$('select').selectize({
      plugins: ['remove_button', 'drag_drop']
  });
});
</script><select multiple>
<option value ="1">One</option>
<option value ="2" selected>Two</option>
<option value ="3" selected>Three</option>
</select>

✅jshjohnson/Choices

它可以附加到选择元素上，并具有一个 ordered 选项，该选项随后重写了select选项的顺序。因此，您的选择将按照选择顺序返回。不过，will not be implemented不能拖放。

使多选控件可排序

4 个答案:

✅✅selectize/selectize.js

✅jshjohnson/Choices

其他在用户界面中显示选择顺序但不允许拖放或似乎没有相应更改选择的库

其他选择库，这些库对选项进行排序并且不首先考虑顺序

未知但不太可能