html5sortable

Lightweight jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

  • Owner: farhadi/html5sortable
  • Platform:
  • License::
  • Category::
  • Topic:
  • Like:
    0
      Compare:

Github stars Tracking Chart

DEPRECATION NOTICE

This project is not mantained anymore. I recommend using RubaXa's Sortable or voidberg's fork instead.

HTML5 Sortable jQuery Plugin

Demos & Documentation

Features

  • Less than 1KB (minified and gzipped).
  • Built using native HTML5 drag and drop API.
  • Supports both list and grid style layouts.
  • Similar API and behaviour to jquery-ui sortable plugin.
  • Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+ and, Opera 12+.

Usage

Use sortable method to create a sortable list:

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

Use .sortable-dragging and .sortable-placeholder CSS selectors to change the styles of a dragging item and its placeholder respectively.

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 remove the sortable functionality completely:

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

To disable the sortable temporarily:

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

To enable a disabled sortable:

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

The API is compatible with jquery-ui. So you can use jquery-ui as a polyfill in older browsers:

yepnope({
    test: Modernizr.draganddrop,
    yep: 'jquery.sortable.js',
    nope: 'jquery-ui.min.js',
    complete: function() {
        $('.sortable').sortable().bind('sortupdate', function(e, ui) {
            //Store the new order.
        }
    }
});

License

Released under the MIT license.

Overview

Name With Ownerfarhadi/html5sortable
Primary LanguageHTML
Program languageJavaScript (Language Count: 2)
Platform
License:
Release Count0
Created At2012-01-27 23:43:41
Pushed At2020-10-01 09:09:07
Last Commit At2015-11-15 11:53:17
Stargazers Count1.7k
Watchers Count76
Fork Count424
Commits Count36
Has Issues Enabled
Issues Count0
Issue Open Count0
Pull Requests Count5
Pull Requests Open Count0
Pull Requests Close Count45
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private
To the top