jQuery Plugin To Arrange/Order DOM Elements By Dragging - dragArrange

dragArrange is a small jQuery drag'n drop plugin which allows to arrange/re-order a list of any DOM elements by mouse drag.

How to use it:

1. Load jQuery library and the jQuery dragArrange plugin at the bottom of the document so the page loads faster.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="drag-arrange.js"></script>

2. Add a CSS class to DOM elements you wish to be sortable.

<div id="demo">
  <div class="draggable-element">Drag 1</div>
  <div class="draggable-element">Drag 2</div>
  <div class="draggable-element">Drag 3</div>
  <div class="draggable-element">Drag 4</div>
</div>

3. Call the plugin and done.

$('.draggable-element').arrangeable();

4. Use dragSelector option to create drag'n'drop handlers for a list of sortable items.

<ul>
  <li><span class="title">list 1</span><span class="drag-area"></span></li>
  <li><span class="title">list 2</span><span class="drag-area"></span></li>
  <li><span class="title">list 3</span><span class="drag-area"></span></li>
  <li><span class="title">list 4</span><span class="drag-area"></span></li>
</ul>

$(function() {
  $('li').arrangeable({
    dragSelector: '.drag-area'
  });
});

Change log:

2017-02-09

• Configurable drag-end event. 

2014-10-14

• bug fix: options(dragSelector) shouldn't be compulsory

2014-10-10

• add event namespace, add destroy function

---

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