From 0b720bbc5fdb6338c22ec42980d7af0e85f988f9 Mon Sep 17 00:00:00 2001
From: Dan Dascalescu <ddascalescu+github@gmail.com>
Date: Sun, 30 Nov 2014 23:49:15 -0800
Subject: [PATCH] Grab handle example

---
 index.html | 26 +++++++++++++++++++++++++-
 st/app.css |  7 ++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 1711192..0792d51 100644
--- a/index.html
+++ b/index.html
@@ -145,6 +145,25 @@
 	</div>
 
 
+	<a name="h"></a>
+	<div class="container" style="margin-top: 100px;">
+		<div id="handle" style="margin-left: 30px;">
+			<div><div data-force="5" class="layer title title_xl">Drag handle and selectable text</div></div>
+
+			<div style="width: 30%; float: left; margin-top: 15px; margin-left: 10px" class="block__list_words">
+				<div class="block__list-title">Drag handles</div>
+					<ul id="handle-1">
+					<li><span class="drag-handle">≡</span>Select text freely</li>
+					<li><span class="drag-handle">≡</span>Drag my handle</li>
+					<li><span class="drag-handle">≡</span>Best of both worlds</li>
+				</ul>
+			</div>
+
+			<div style="clear: both"></div>
+		</div>
+	</div>
+
+
 	<a name="ng"></a>
 	<div id="todos" ng-app="todoApp" class="container" style="margin-top: 100px">
 		<div style="margin-left: 30px">
@@ -346,7 +365,12 @@ var editableList = new Sortable(editable, {
 					animation: 150
 				});
 			});
-			
+
+			new Sortable(document.getElementById('handle-1'), {
+				handle: '.drag-handle',
+				animation: 150
+			});
+
 
 			angular.module('todoApp', ['ng-sortable'])
 				.controller('TodoController', ['$scope', function ($scope) {
diff --git a/st/app.css b/st/app.css
index 1b53f33..c5b7f89 100644
--- a/st/app.css
+++ b/st/app.css
@@ -216,7 +216,12 @@ img {
 		padding-bottom: 0;
 	}
 
-
+.drag-handle {
+	margin-right: 0.25em;
+	color: blue;
+	cursor: move;
+	cursor: -webkit-grabbing;  /* overrides 'move' */
+}
 
 #todos input {
 	padding: 5px;