Sorting Select Options With Drag And Drop - jQuery dragOptions

dragOptions is a lightweight jQuery plugin that enhance the native select element with sortable & draggable options.

How to use it:

1. Load the jQuery dragOptions plugin's script jquery.dragoptions.js.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.dragoptions.js"></script>

2. Let's say you have a select dropdown list as this. Note that the plugin supports both single and multiple select element.

<select id="demo" multiple>
  <option value="1">Acura</option>
  <option value="2">Audi</option>
  <option value="3">BMW</option>
  <option value="4">Cadillac</option>
  <option value="5">Chevrolet</option>
  <option value="6">Ferrari</option>
  <option value="7">Ford</option>
  <option value="8">Honda</option>
  <option value="9">Lexus</option>
  <option value="10">Mercedes-Benz</option>
</select>

3. Initialize the plugin on this select element and done.

$("#demo").dragOptions();

4. Set the draggable indicator in the JavaScript.

$("#demo").dragOptions({
  highlight: "►"
});

5. Callback functions available.

$("#demo").dragOptions({
  onDrag: function(){
    console.log('onDrag callback: ', this);
  },
  onChange: function(){
    console.log('onChange callback: ', this);
  }
});

Change log:

2018-04-13

• Also another bug fixed: selection kept after performing dragging of option.

2017-03-14

• Version: 1.2: mouseup event triggers

---

This awesome jQuery plugin is developed by NikitaKA. For more Advanced Usages, please check the demo page or visit the official website.