diff --git a/README.md b/README.md index 3013526..78de6e2 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,13 @@ -I failed to mainttain this project in the past two years. -For an updated version see [voidberg's fork](https://github.com/voidberg/html5sortable) - -HTML5 Sortable jQuery Plugin +Bootstrap HTML5 Sortable jQuery Plugin ============================ -**[Demos & Documentation](http://farhadi.ir/projects/html5sortable)** +**[Demos & Documentation](http://psfpro.ru/html5sortable/index.html)** 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 @@ -23,6 +19,14 @@ $('.sortable').sortable(); ``` Use `.sortable-dragging` and `.sortable-placeholder` CSS selectors to change the styles of a dragging item and its placeholder respectively. +Use `placeholderClass` option to create sortable lists with additional class for placeholder: + +``` javascript +$('.sortable').sortable({ + placeholderClass: 'customPlaceholderClass' +}); +``` + Use `sortupdate` event if you want to do something when the order changes (e.g. storing the new order): ``` javascript @@ -80,21 +84,6 @@ 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: - -``` javascript -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. diff --git a/index.html b/index.html index 0b650db..09aedca 100644 --- a/index.html +++ b/index.html @@ -1,175 +1,288 @@ - HTML5 Sortable jQuery Plugin + Bootstrap HTML5 Sortable jQuery Plugin + + - - -
-

HTML5 Sortable jQuery Plugin

-
-
-

Features

- -
-
-

Sortable List

- -
-
-

Sortable Grid

- -
-
-

Exclude Items

- -
-
-

Sortable List With Handles

- -
-
-

Connected Sortable Lists

- - -
- Fork me on GitHub - +
+
+

Bootstrap HTML5 Sortable jQuery Plugin

+
+
+

Features

+ +
+ +
+
+
+

Sortable table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+
+
+

Sortable Thumbnail

+
+
+
+
+

Thumbnail label 1

+

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Button Button

+
+
+
+
+
+
+

Thumbnail label 2

+

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Button Button

+
+
+
+
+
+
+

Thumbnail label 3

+

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Button Button

+
+
+
+
+
+
+

Thumbnail label 4

+

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Button Button

+
+
+
+
+
+
+

Thumbnail label 5

+

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Button Button

+
+
+
+
+
+
+

Thumbnail label 6

+

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Button Button

+
+
+
+
+
+
+

Sortable List Group

+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
+
+
+

Sortable List Group Exclude

+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
+
+
+

Sortable List Group With Handles

+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
+
+
+

Sortable List Group Connected

+
+
+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
+
+
+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
+
+
+
+
+
+
+

How to use it?

+

+ Download it from here. + Then use it like this: + 

<ul class="sortable">
+    <li>Item 1
+    <li>Item 2
+    <li>Item 3
+    <li>Item 4
+    </ul>
+    <script src="jquery.sortable.js"></script>
+    <script>
+    $('.sortable').sortable();
+</script>
+
+

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

+

+ Use placeholderClass option to create sortable lists with additional class for placeholder. + 

$('.sortable').sortable({
+    placeholderClass: 'customPlaceholderClass'
+});
+
+

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

$('.sortable').sortable().bind('sortupdate', function() {
+    //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 create sortable lists with handles: + 

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

+ 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');
+
+
+
+
+

+ Home +

+
+ + + diff --git a/jquery.sortable.js b/jquery.sortable.js index 350d172..84c8b5d 100644 --- a/jquery.sortable.js +++ b/jquery.sortable.js @@ -22,8 +22,9 @@ $.fn.sortable = function(options) { return; } var isHandle, index, items = $(this).children(options.items); - var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">'); - items.find(options.handle).mousedown(function() { + var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : /^tbody$/i.test(this.tagName) ? 'tr' : 'div') + + ' class="sortable-placeholder ' + options.placeholderClass + '">').html(' '); + items.find(options.handle).mousedown(function() { isHandle = true; }).mouseup(function() { isHandle = false; diff --git a/jquery.sortable.min.js b/jquery.sortable.min.js new file mode 100644 index 0000000..27aad9f --- /dev/null +++ b/jquery.sortable.min.js @@ -0,0 +1,4 @@ +(function(a){var c,e=a();a.fn.sortable=function(b){var k=String(b);b=a.extend({connectWith:!1},b);return this.each(function(){if(/^enable|disable|destroy$/.test(k)){var g=a(this).children(a(this).data("items")).attr("draggable","enable"==k);"destroy"==k&&g.add(this).removeData("connectWith items").off("dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s")}else{var h,l,g=a(this).children(b.items),f=a("<"+(/^ul|ol$/i.test(this.tagName)?"li":/^tbody$/i.test(this.tagName)?"tr": +"div")+' class="sortable-placeholder '+b.placeholderClass+'">').html(" ");g.find(b.handle).mousedown(function(){h=!0}).mouseup(function(){h=!1});a(this).data("items",b.items);e=e.add(f);b.connectWith&&a(b.connectWith).add(this).data("connectWith",b.connectWith);g.attr("draggable","true").on("dragstart.h5s",function(d){if(b.handle&&!h)return!1;h=!1;d=d.originalEvent.dataTransfer;d.effectAllowed="move";d.setData("Text","dummy");l=(c=a(this)).addClass("sortable-dragging").index()}).on("dragend.h5s", +function(){c&&(c.removeClass("sortable-dragging").show(),e.detach(),l!=c.index()&&c.parent().trigger("sortupdate",{item:c}),c=null)}).not("a[href], img").on("selectstart.h5s",function(){this.dragDrop&&this.dragDrop();return!1}).end().add([this,f]).on("dragover.h5s dragenter.h5s drop.h5s",function(d){if(!g.is(c)&&b.connectWith!==a(c).parent().data("connectWith"))return!0;if("drop"==d.type)return d.stopPropagation(),e.filter(":visible").after(c),c.trigger("dragend.h5s"),!1;d.preventDefault();d.originalEvent.dataTransfer.dropEffect= +"move";g.is(this)?(b.forcePlaceholderSize&&f.height(c.outerHeight()),c.hide(),a(this)[f.index()