Skip to content
This repository
  • 5 commits
  • 3 files changed
  • 3 comments
  • 1 contributor
72  README.md
Source Rendered
@@ -13,12 +13,84 @@ Features
13 13
 
14 14
 Usage
15 15
 -----
  16
+Use `sortable` method to create a sortable list:
  17
+
  18
+``` javascript
  19
+$('.sortable').sortable();
  20
+```
  21
+Use `.sortable-dragging` and `.sortable-placeholder` CSS selectors to change the styles of a dragging item and its placeholder respectively.
  22
+
  23
+Use `sortupdate` event if you want to do something when the order changes (e.g. storing the new order):
  24
+
16 25
 ``` javascript
17 26
 $('.sortable').sortable().bind('sortupdate', function() {
18 27
     //Triggered when the user stopped sorting and the DOM position has changed.
19 28
 });
20 29
 ```
21 30
 
  31
+Use `items` option to specifiy which items inside the element should be sortable:
  32
+
  33
+``` javascript
  34
+$('.sortable').sortable({
  35
+    items: ':not(.disabled)'
  36
+});
  37
+```
  38
+Use `handle` option to restrict drag start to the specified element:
  39
+
  40
+``` javascript
  41
+$('.sortable').sortable({
  42
+    handle: 'h2'
  43
+});
  44
+```
  45
+Setting `forcePlaceholderSize` option to true, forces the placeholder to have a height:
  46
+
  47
+``` javascript
  48
+$('.sortable').sortable({
  49
+    forcePlaceholderSize: true 
  50
+});
  51
+```
  52
+
  53
+Use `connectWith` option to create connected lists:
  54
+
  55
+``` javascript
  56
+$('#sortable1, #sortable2').sortable({
  57
+    connectWith: '.connected'
  58
+});
  59
+```
  60
+
  61
+To remove the sortable functionality completely:
  62
+
  63
+``` javascript
  64
+$('.sortable').sortable('destroy');
  65
+```
  66
+
  67
+To disable the sortable temporarily:
  68
+
  69
+``` javascript
  70
+$('.sortable').sortable('disable');
  71
+```
  72
+
  73
+To enable a disabled sortable:
  74
+
  75
+``` javascript
  76
+$('.sortable').sortable('enable');
  77
+```
  78
+
  79
+The API is compatible with jquery-ui. So you can use jquery-ui as a polyfill in older browsers:
  80
+
  81
+``` javascript
  82
+yepnope({
  83
+    test: Modernizr.draganddrop,
  84
+    yep: 'jquery.sortable.js',
  85
+    nope: 'jquery-ui.min.js',
  86
+    complete: function() {
  87
+        $('.sortable').sortable().bind('sortupdate', function() {
  88
+            //Store the new order.
  89
+        }
  90
+    }
  91
+});
  92
+```
  93
+
22 94
 License
23 95
 -------
24 96
 Released under the MIT license.
21  index.html
@@ -18,7 +18,7 @@
18 18
 			width: 460px;
19 19
 			font-size: 0.9em;
20 20
 		}
21  
-		.connected, .sortable, .exclude {
  21
+		.connected, .sortable, .exclude, .handles {
22 22
 			margin: auto;
23 23
 			padding: 0;
24 24
 			width: 310px;
@@ -32,7 +32,7 @@
32 32
 		.sortable.grid {
33 33
 			overflow: hidden;
34 34
 		}
35  
-		.connected li, .sortable li, .exclude li {
  35
+		.connected li, .sortable li, .exclude li, .handles li {
36 36
 			list-style: none;
37 37
 			border: 1px solid #CCC;
38 38
 			background: #F6F6F6;
@@ -42,6 +42,9 @@
42 42
 			padding: 5px;
43 43
 			height: 22px;
44 44
 		}
  45
+		.handles span {
  46
+			cursor: move;
  47
+		}
45 48
 		li.disabled {
46 49
 			opacity: 0.5;
47 50
 		}
@@ -122,6 +125,17 @@
122 125
 			<li class="disabled">Item 6</li>
123 126
 		</ul>
124 127
 	</section>
  128
+	<section>
  129
+		<h2>Sortable List With Handles</h2>
  130
+		<ul class="handles list">
  131
+			<li><span>::</span> Item 1</li>
  132
+			<li><span>::</span> Item 2</li>
  133
+			<li><span>::</span> Item 3</li>
  134
+			<li><span>::</span> Item 4</li>
  135
+			<li><span>::</span> Item 5</li>
  136
+			<li><span>::</span> Item 6</li>
  137
+		</ul>
  138
+	</section>
125 139
 	<section id="connected">
126 140
 		<h2>Connected Sortable Lists</h2>
127 141
 		<ul class="connected list">
@@ -147,6 +161,9 @@
147 161
 	<script>
148 162
 		$(function() {
149 163
 			$('.sortable').sortable();
  164
+			$('.handles').sortable({
  165
+				handle: 'span'
  166
+			});
150 167
 			$('.connected').sortable({
151 168
 				connectWith: '.connected'
152 169
 			});
59  jquery.sortable.js
@@ -8,47 +8,70 @@
8 8
 (function($) {
9 9
 var dragging, placeholders = $();
10 10
 $.fn.sortable = function(options) {
11  
-	options = options || {};
  11
+	var method = String(options);
  12
+	options = $.extend({
  13
+		connectWith: false
  14
+	}, options);
12 15
 	return this.each(function() {
13  
-		var index, items = $(this).children(options.items), connectWith = options.connectWith || false;
14  
-		var placeholder = $('<' + items[0].tagName + '>').addClass('sortable-placeholder');
  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 = $('<' + items[0].tagName + ' 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)
15 32
 		placeholders = placeholders.add(placeholder);
16  
-		$(connectWith).add(connectWith && this).data('connectWith', connectWith);
17  
-		items.attr('draggable', 'true').bind('dragstart', function(e) {
  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;
18 41
 			var dt = e.originalEvent.dataTransfer;
19 42
 			dt.effectAllowed = 'move';
20 43
 			dt.setData('Text', 'dummy');
21  
-			dragging = $(this).addClass('sortable-dragging');
22  
-			index = dragging.index();
23  
-		}).bind('dragend', function() {
  44
+			index = (dragging = $(this)).addClass('sortable-dragging').index();
  45
+		}).on('dragend.h5s', function() {
24 46
 			dragging.removeClass('sortable-dragging').fadeIn();
25 47
 			placeholders.detach();
26 48
 			if (index != dragging.index()) {
27 49
 				items.parent().trigger('sortupdate');
28 50
 			}
29 51
 			dragging = null;
30  
-		}).not('a[href], img').bind('selectstart', function() {
  52
+		}).not('a[href], img').on('selectstart.h5s', function() {
31 53
 			this.dragDrop && this.dragDrop();
32 54
 			return false;
33  
-		}).end().add([this, placeholder]).bind('dragover dragenter', function(e) {
34  
-			if (!items.is(dragging) && connectWith !== $(dragging).parent().data('connectWith')) {
  55
+		}).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) {
  56
+			if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) {
35 57
 				return true;
36 58
 			}
  59
+			if (e.type == 'drop') {
  60
+				e.stopPropagation();
  61
+				placeholders.filter(':visible').after(dragging);
  62
+				return false;
  63
+			}
37 64
 			e.preventDefault();
38 65
 			e.originalEvent.dataTransfer.dropEffect = 'move';
39 66
 			if (items.is(this)) {
  67
+				if (options.forcePlaceholderSize) {
  68
+					placeholder.height(dragging.height());
  69
+				}
40 70
 				dragging.hide();
41 71
 				$(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
42 72
 				placeholders.not(placeholder).detach();
43 73
 			}
44 74
 			return false;
45  
-		}).bind('drop', function(e) {
46  
-			if (!items.is(dragging) && connectWith !== $(dragging).parent().data('connectWith')) {
47  
-				return true;
48  
-			}
49  
-			e.stopPropagation();
50  
-			placeholders.filter(':visible').after(dragging);
51  
-			return false;
52 75
 		});
53 76
 	});
54 77
 };

Showing you all comments on commits in this comparison.

Microweber

Thanks for implementing Ali

Mats Lindblad

Could you explain the selectstart? And also the 'h5s' on all events? I've googled a bit but I can't find an explanation for it.

Ali Farhadi
Owner

selectstart is a IE-specific event used as a workaround to fix IE bug with elements other than a and img.
h5s is just a namespace used for all events of this plugin so that I can remove them all at once when a sortable list is destroyed.

Something went wrong with that request. Please try again.