javascript - 使多选控件可排序

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

✅✅ selectize/selectize.js

这可以附加到文本(freetagging)以及选择。我确实有 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

这可以附加到一个选择元素并有一个有序选项，然后重写选择选项的顺序。因此，您的选择会按照您选择它们​​的顺序返回。虽然拖放是不可能的，并且will not be implemented .

其他在 UI 中显示选择顺序但不允许拖放也似乎相应地更改选择的库

• > Dropdown | Semantic UI ( 1 , 2 )
• > jQuery Dropdown | Dane
• > Fastselect
• > Light Weight MultiSelect Test Page

其他选择的库对它们的选项进行排序并且一开始就不遵守顺序

• > tail.select
• > jQuery Pretty Dropdowns Demo
• > creativecirclemedia/dropdown-checkboxes
• > jQuery Selectric
• > Jquery.sumoselect by Hemant Negi

未知但不太可能

• > jQuery Selectpick
• > https://prevwong.github.io/awesome-select/
• > PebbleRoad/combo-select
• > zeusdeux/fuzzy-dropdown
• > ddSlick
• > Hierarchy Select jQuery Plugin for Twitter Bootstrap 4
• > BenMMcLean/BetterSelecter
• > bschueller/jquery.selectMe