html5sortable

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

  • 所有者: farhadi/html5sortable
  • 平台:
  • 許可證:
  • 分類:
  • 主題:
  • 喜歡:
    0
      比較:

Github星跟蹤圖

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.

概覽

名稱與所有者farhadi/html5sortable
主編程語言HTML
編程語言JavaScript (語言數: 2)
平台
許可證
發布數0
創建於2012-01-27 23:43:41
推送於2020-10-01 09:09:07
最后一次提交2015-11-15 11:53:17
星數1.7k
關注者數76
派生數379
提交數36
已啟用問題?
問題數0
打開的問題數0
拉請求數5
打開的拉請求數0
關閉的拉請求數45
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?
去到頂部