├── README.md ├── bower.json ├── index.html ├── jquery.sortable.js └── jquery.sortable.min.js /README.md: -------------------------------------------------------------------------------- 1 | DEPRECATION NOTICE 2 | ------------------ 3 | This project is not mantained anymore. I recommend using [RubaXa's Sortable](https://github.com/RubaXa/Sortable) or [voidberg's fork](https://github.com/voidberg/html5sortable) instead. 4 | 5 | HTML5 Sortable jQuery Plugin 6 | ============================ 7 | 8 | **[Demos & Documentation](http://farhadi.ir/projects/html5sortable)** 9 | 10 | Features 11 | -------- 12 | * Less than 1KB (minified and gzipped). 13 | * Built using native HTML5 drag and drop API. 14 | * Supports both list and grid style layouts. 15 | * Similar API and behaviour to jquery-ui sortable plugin. 16 | * Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+ and, Opera 12+. 17 | 18 | Usage 19 | ----- 20 | Use `sortable` method to create a sortable list: 21 | 22 | ``` javascript 23 | $('.sortable').sortable(); 24 | ``` 25 | Use `.sortable-dragging` and `.sortable-placeholder` CSS selectors to change the styles of a dragging item and its placeholder respectively. 26 | 27 | Use `sortupdate` event if you want to do something when the order changes (e.g. storing the new order): 28 | 29 | ``` javascript 30 | $('.sortable').sortable().bind('sortupdate', function(e, ui) { 31 | //ui.item contains the current dragged element. 32 | //Triggered when the user stopped sorting and the DOM position has changed. 33 | }); 34 | ``` 35 | 36 | Use `items` option to specifiy which items inside the element should be sortable: 37 | 38 | ``` javascript 39 | $('.sortable').sortable({ 40 | items: ':not(.disabled)' 41 | }); 42 | ``` 43 | Use `handle` option to restrict drag start to the specified element: 44 | 45 | ``` javascript 46 | $('.sortable').sortable({ 47 | handle: 'h2' 48 | }); 49 | ``` 50 | Setting `forcePlaceholderSize` option to true, forces the placeholder to have a height: 51 | 52 | ``` javascript 53 | $('.sortable').sortable({ 54 | forcePlaceholderSize: true 55 | }); 56 | ``` 57 | 58 | Use `connectWith` option to create connected lists: 59 | 60 | ``` javascript 61 | $('#sortable1, #sortable2').sortable({ 62 | connectWith: '.connected' 63 | }); 64 | ``` 65 | 66 | To remove the sortable functionality completely: 67 | 68 | ``` javascript 69 | $('.sortable').sortable('destroy'); 70 | ``` 71 | 72 | To disable the sortable temporarily: 73 | 74 | ``` javascript 75 | $('.sortable').sortable('disable'); 76 | ``` 77 | 78 | To enable a disabled sortable: 79 | 80 | ``` javascript 81 | $('.sortable').sortable('enable'); 82 | ``` 83 | 84 | The API is compatible with jquery-ui. So you can use jquery-ui as a polyfill in older browsers: 85 | 86 | ``` javascript 87 | yepnope({ 88 | test: Modernizr.draganddrop, 89 | yep: 'jquery.sortable.js', 90 | nope: 'jquery-ui.min.js', 91 | complete: function() { 92 | $('.sortable').sortable().bind('sortupdate', function(e, ui) { 93 | //Store the new order. 94 | } 95 | } 96 | }); 97 | ``` 98 | 99 | License 100 | ------- 101 | Released under the MIT license. 102 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html5sortable", 3 | "version": "0.0.1", 4 | "homepage": "http://farhadi.ir/projects/html5sortable/", 5 | "authors": [ 6 | "Ali Farhadi " 7 | ], 8 | "description": "Lightweight jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.", 9 | "main": "./jquery.sortable.js", 10 | "keywords": [ 11 | "html5", 12 | "sortable", 13 | "jquery" 14 | ], 15 | "license": "MIT", 16 | "ignore": [ 17 | "**/.*", 18 | "node_modules", 19 | "bower_components", 20 | "test", 21 | "tests" 22 | ], 23 | "dependencies": { 24 | "jquery": ">= 1.9.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HTML5 Sortable jQuery Plugin 5 | 78 | 79 | 80 | 81 | 82 |
83 |

HTML5 Sortable jQuery Plugin

84 |
85 |
86 |

Features

87 | 94 |
95 |
96 |

Sortable List

97 | 105 |
106 |
107 |

Sortable Grid

108 | 116 |
117 |
118 |

Exclude Items

119 | 127 |
128 |
129 |

Sortable List With Handles

130 | 138 |
139 |
140 |

Connected Sortable Lists

141 | 149 | 157 |
158 | Fork me on GitHub 159 | 160 | 161 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /jquery.sortable.js: -------------------------------------------------------------------------------- 1 | /* 2 | * HTML5 Sortable jQuery Plugin 3 | * http://farhadi.ir/projects/html5sortable 4 | * 5 | * Copyright 2012, Ali Farhadi 6 | * Released under the MIT license. 7 | */ 8 | (function($) { 9 | var dragging, placeholders = $(); 10 | $.fn.sortable = function(options) { 11 | var method = String(options); 12 | options = $.extend({ 13 | connectWith: false 14 | }, options); 15 | return this.each(function() { 16 | if (/^(enable|disable|destroy)$/.test(method)) { 17 | var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable'); 18 | if (method == 'destroy') { 19 | items.add(this).removeData('connectWith items') 20 | .off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s'); 21 | } 22 | return; 23 | } 24 | var isHandle, index, items = $(this).children(options.items); 25 | var placeholder = $('<' + (/^(ul|ol)$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">'); 26 | items.find(options.handle).mousedown(function() { 27 | isHandle = true; 28 | }).mouseup(function() { 29 | isHandle = false; 30 | }); 31 | $(this).data('items', options.items) 32 | placeholders = placeholders.add(placeholder); 33 | if (options.connectWith) { 34 | $(options.connectWith).add(this).data('connectWith', options.connectWith); 35 | } 36 | items.attr('draggable', 'true').on('dragstart.h5s', function(e) { 37 | if (options.handle && !isHandle) { 38 | return false; 39 | } 40 | isHandle = false; 41 | var dt = e.originalEvent.dataTransfer; 42 | dt.effectAllowed = 'move'; 43 | dt.setData('Text', 'dummy'); 44 | index = (dragging = $(this)).addClass('sortable-dragging').index(); 45 | }).on('dragend.h5s', function() { 46 | if (!dragging) { 47 | return; 48 | } 49 | dragging.removeClass('sortable-dragging').show(); 50 | placeholders.detach(); 51 | if (index != dragging.index()) { 52 | dragging.parent().trigger('sortupdate', {item: dragging}); 53 | } 54 | dragging = null; 55 | }).not('a[href], img').on('selectstart.h5s', function() { 56 | this.dragDrop && this.dragDrop(); 57 | return false; 58 | }).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) { 59 | if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) { 60 | return true; 61 | } 62 | if (e.type == 'drop') { 63 | e.stopPropagation(); 64 | placeholders.filter(':visible').after(dragging); 65 | dragging.trigger('dragend.h5s'); 66 | return false; 67 | } 68 | e.preventDefault(); 69 | e.originalEvent.dataTransfer.dropEffect = 'move'; 70 | if (items.is(this)) { 71 | if (options.forcePlaceholderSize) { 72 | placeholder.height(dragging.outerHeight()); 73 | } 74 | dragging.hide(); 75 | $(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder); 76 | placeholders.not(placeholder).detach(); 77 | } else if (!placeholders.is(this) && !$(this).children(options.items).length) { 78 | placeholders.detach(); 79 | $(this).append(placeholder); 80 | } 81 | return false; 82 | }); 83 | }); 84 | }; 85 | })(jQuery); 86 | -------------------------------------------------------------------------------- /jquery.sortable.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * HTML5 Sortable jQuery Plugin 3 | * http://farhadi.ir/projects/html5sortable 4 | * 5 | * Copyright 2012, Ali Farhadi 6 | * Released under the MIT license. 7 | */ 8 | (function(e){var t,n=e();e.fn.sortable=function(r){var i=String(r);r=e.extend({connectWith:false},r);return this.each(function(){if(/^enable|disable|destroy$/.test(i)){var s=e(this).children(e(this).data("items")).attr("draggable",i=="enable");if(i=="destroy"){s.add(this).removeData("connectWith items").off("dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s")}return}var o,u,s=e(this).children(r.items);var a=e("<"+(/^ul|ol$/i.test(this.tagName)?"li":"div")+' class="sortable-placeholder">');s.find(r.handle).mousedown(function(){o=true}).mouseup(function(){o=false});e(this).data("items",r.items);n=n.add(a);if(r.connectWith){e(r.connectWith).add(this).data("connectWith",r.connectWith)}s.attr("draggable","true").on("dragstart.h5s",function(n){if(r.handle&&!o){return false}o=false;var i=n.originalEvent.dataTransfer;i.effectAllowed="move";i.setData("Text","dummy");u=(t=e(this)).addClass("sortable-dragging").index()}).on("dragend.h5s",function(){if(!t){return}t.removeClass("sortable-dragging").show();n.detach();if(u!=t.index()){t.parent().trigger("sortupdate",{item:t})}t=null}).not("a[href], img").on("selectstart.h5s",function(){this.dragDrop&&this.dragDrop();return false}).end().add([this,a]).on("dragover.h5s dragenter.h5s drop.h5s",function(i){if(!s.is(t)&&r.connectWith!==e(t).parent().data("connectWith")){return true}if(i.type=="drop"){i.stopPropagation();n.filter(":visible").after(t);t.trigger("dragend.h5s");return false}i.preventDefault();i.originalEvent.dataTransfer.dropEffect="move";if(s.is(this)){if(r.forcePlaceholderSize){a.height(t.outerHeight())}t.hide();e(this)[a.index()