Adding ability to specifiy a drag handle for items. Fixes #6.

Author: farhadi

README.md

@@ -35,6 +35,13 @@ $('.sortable').sortable({
     items: ':not(.disabled)'
 });
 ```
+Use `handle` option to restrict drag start to the specified element:
+
+``` javascript
+$('.sortable').sortable({
+    handle: 'h2'
+});
+```
 
 Use `connectWith` option to create connected lists:
 

index.html

@@ -18,7 +18,7 @@
 			width: 460px;
 			font-size: 0.9em;
 		}
-		.connected, .sortable, .exclude {
+		.connected, .sortable, .exclude, .handles {
 			margin: auto;
 			padding: 0;
 			width: 310px;
@@ -32,7 +32,7 @@
 		.sortable.grid {
 			overflow: hidden;
 		}
-		.connected li, .sortable li, .exclude li {
+		.connected li, .sortable li, .exclude li, .handles li {
 			list-style: none;
 			border: 1px solid #CCC;
 			background: #F6F6F6;
@@ -42,6 +42,9 @@
 			padding: 5px;
 			height: 22px;
 		}
+		.handles span {
+			cursor: move;
+		}
 		li.disabled {
 			opacity: 0.5;
 		}
@@ -122,6 +125,17 @@ <h2>Exclude Items</h2>
 			<li class="disabled">Item 6</li>
 		</ul>
 	</section>
+	<section>
+		<h2>Sortable List With Handles</h2>
+		<ul class="handles list">
+			<li><span>::</span> Item 1</li>
+			<li><span>::</span> Item 2</li>
+			<li><span>::</span> Item 3</li>
+			<li><span>::</span> Item 4</li>
+			<li><span>::</span> Item 5</li>
+			<li><span>::</span> Item 6</li>
+		</ul>
+	</section>
 	<section id="connected">
 		<h2>Connected Sortable Lists</h2>
 		<ul class="connected list">
@@ -147,6 +161,9 @@ <h2>Connected Sortable Lists</h2>
 	<script>
 		$(function() {
 			$('.sortable').sortable();
+			$('.handles').sortable({
+				handle: 'span'
+			});
 			$('.connected').sortable({
 				connectWith: '.connected'
 			});

jquery.sortable.js

@@ -19,10 +19,22 @@ $.fn.sortable = function(options) {
 		}
 		var index, items = $(this).children(options.items), connectWith = options.connectWith || false;
 		var placeholder = $('<' + items[0].tagName + ' class="sortable-placeholder">');
+		var handle = options.handle, isHandle;
+		items.find(handle).mousedown(function() {
+			isHandle = true;
+		}).mouseup(function() {
+			isHandle = false;
+		});
 		$(this).data('items', options.items)
 		placeholders = placeholders.add(placeholder);
-		connectWith && $(connectWith).add(this).data('connectWith', connectWith);
+		if (connectWith) {
+			$(connectWith).add(this).data('connectWith', connectWith);
+		}
 		items.attr('draggable', 'true').bind('dragstart.h5s', function(e) {
+			if (handle && !isHandle) {
+				return false;
+			}
+			isHandle = false;
 			var dt = e.originalEvent.dataTransfer;
 			dt.effectAllowed = 'move';
 			dt.setData('Text', 'dummy');