• This repository has been archived on 01/Oct/2020
  • Stars
    star
    1,651
  • Rank 28,199 (Top 0.6 %)
  • Language
    HTML
  • Created over 12 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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.

More Repositories

1

node-smpp

SMPP client and server implementation in node.js
JavaScript
412
star
2

JalaliJSCalendar

JalaliJSCalendar is a JavaScript DHTML Calendar based on "Dynarch DHTML Calendar" from "Mihai Bazon". The main difference between them is that JalaliJSCalendar supports Persian calendar (aka jalali calendar), that is the official iranian calendar.
JavaScript
126
star
3

SmartOptimizer

SmartOptimizer is an open source PHP program that enhances your website performance by optimizing the front-end using techniques such as minifying, compression, caching and concatenation on demand.
PHP
111
star
4

IntlDateTime

An extented version of php 5 DateTime class with integrated IntlDateFormatter functionality which adds support for multiple calendars and locales provided by ICU project.
PHP
41
star
5

cuckoo_filter

High-performance, concurrent, and mutable Cuckoo Filter for Erlang and Elixir
Erlang
41
star
6

rate_limiter

A high performance rate limiter on top of erlang atomics for Elixir
Elixir
28
star
7

xxh3

Erlang NIF bindings for XXH3 hash functions implemented in Rust
Erlang
24
star
8

cuckoo_cache

A high-performance probabilistic LRFU concurrent in-memory cache with one-hit-wonders detection for Erlang and Elixir
Erlang
22
star
9

ali3

My stuff for lithium framework
PHP
14
star
10

task-pool

A generic pool to limit number of running asynchronous tasks in node.js
JavaScript
11
star
11

ExtDateTime

An extented version of php5 DateTime Class that adds some more functionality to it and makes it extensible for other calendar systems.
PHP
11
star
12

injector

Dependency injection for Elixir
Elixir
9
star
13

webextract

A web-based utility to extract archive files for unix systems.
Python
6
star
14

global_supervisor

A supervisor that dynamically distributes children across the cluster.
Elixir
5
star
15

singleton_supervisor

Singleton supervisor within an erlang cluster
Elixir
5
star
16

filter.js

An approach to aspect-oriented programming (AOP) in javascript
JavaScript
5
star
17

congestion

Generator-based congestion control
JavaScript
4
star
18

js

My JavaScript Stuff
JavaScript
4
star
19

spinlock

Spinlock for Erlang and Elixir
Erlang
3
star
20

multical-date-widget

a multi-calendar and multi-language date widget for Maemo (N900) with support for Persian, Islamic/Hijri and some other calendar systems.
Python
2
star
21

priority_receive

Prioritized selective receive for Elixir
Elixir
1
star