Native HTML5 Drag And Drop jQuery Plugin – html5sortable

Looking for a affordable website?

GET STARTED
www.codingexpertz.com
Native HTML5 Drag And Drop jQuery Plugin – html5sortable

File Size: 416KB

Total Views: 1654

Date Created:

Last Modified Date:

Official Website: Go to website

License:

Html5sortable is very simple and lightweight jQuery plugin that built using native HTML5 drag and drops API. Style of the elements are controlled with pure CSS so list or grid layout can be modified easily with the help of the CSS. Implement process of the plugin is very easy so it can be implemented easily without any extra coding knowledge.

Features:

  • Easy to implement.
  • Lightweight, less than 1KB (minified and gzipped).
  • Can be modified the style easily with the help of CSS.
  • Supports on all modern browser and devices.
  • Supports both list and grid style layouts.

How to use it:

1. Include the Javascript jquery.sortable.min.js at the bottom of the web page.

<script src="path/to/jquery.sortable.min.js"></script>

2. Add the basic HTML to the page.

<ul class="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

3. Initialize the plugin and we’re ready to go.

$(function() {
  $('.sortable').sortable();
});

Use sortupdate event if you want to do something when the order changes (e.g. storing the new order):

$('.sortable').sortable().bind('sortupdate', function(e, ui) {
    //ui.item contains the current dragged element.
    //Triggered when the user stopped sorting and the DOM position has changed.
});

Use items option to specifiy which items inside the element should be sortable:

$('.sortable').sortable({
  items: ':not(.disabled)'
});

Use handle option to restrict drag start to the specified element:

$('.sortable').sortable({
  handle: 'h2'
});

Setting forcePlaceholderSize option to true, forces the placeholder to have a height:

$('.sortable').sortable({
  forcePlaceholderSize: true
});

Use connectWith option to create connected lists:

$('#sortable1, #sortable2').sortable({
  connectWith: '.connected'
});

To destroy the sortable functionality completely:

$('.sortable').sortable('destroy');

To disable the sortable temporarily:

$('.sortable').sortable('disable');

To enable a disabled sortable:

$('.sortable').sortable('enable');

Leave a comment

Your email address will not be published. Required fields are marked *

STAYUPDATED

Receive all our future posts instantly in your inbox. Enter your email to enroll.