Simple jQuery Plugin For Drag & Drop Sorting Of Lists - jesse

File Size: 3.85 KB
Views Total: 2487
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Plugin For Drag & Drop Sorting Of Lists - jesse

jesse is a simple jQuery plugin that enables drag and drop functionality on your html list to make the list items sortable using the mouse. Without the need of jQuery UI's Draggable component.

How to use it:

1. Load the latest version of jQuery library and the jQuery jesse plugin in the document.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery-jesse.js"></script>

2. Load the jQuery jesse plugin's stylesheet for basic CSS styles.

<link rel="stylesheet" href="jquery-jesse.css">

3. Create a list of sortable items as follow:

<ul class="jq-jesse" id="list">
  <li class="jq-jesse__item">0</li>
  <li class="jq-jesse__item">1</li>
  <li class="jq-jesse__item">2</li>
  <li class="jq-jesse__item">3</li>
  ...
</ul>

4. Enable the plugin on this Html list.

$('#list').jesse();

5. Available options with default values.

$('#list').jesse({

  // jquery Selector for sortable items
  selector:    'li',

  // CSS class to be added to a dragged element
  dragClass:   '_isDragged',

  // placeholder item
  placeholder: '<li class="jq-jesse__placeholder"></li>',

  // executed after the item change position.
  onChangePosition: function(position, prevPosition, item) {},
  
  // executed when the item has dropped
  onStop: function(position, prevPosition, item) {}
  
});

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