Sorting Select Options With Drag And Drop - jQuery dragOptions

File Size: 4.68 KB
Views Total: 9516
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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>

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


4. Set the draggable indicator in the JavaScript.

  highlight: "►"

5. Callback functions available.

  onDrag: function(){
    console.log('onDrag callback: ', this);
  onChange: function(){
    console.log('onChange callback: ', this);

Change log:


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


  • 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.