From 68c0f90e39346a346b16619dc777237e44f3df59 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@googlemail.com>
Date: Tue, 30 Dec 2008 09:14:19 +0000
Subject: [PATCH] demos: added helper and handle demos for draggables

---
 demos/draggable/handle.html | 27 ++++++++++++++++++++++++
 demos/draggable/helper.html | 41 +++++++++++++++++++++++++++++++++++++
 demos/draggable/index.html  |  2 ++
 3 files changed, 70 insertions(+)
 create mode 100644 demos/draggable/handle.html
 create mode 100644 demos/draggable/helper.html
diff --git a/demos/draggable/handle.html b/demos/draggable/handle.html
new file mode 100644
index 000000000..ae2c777d2
--- /dev/null
+++ b/demos/draggable/handle.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>jQuery UI Draggable - Handle</title>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+	<script type="text/javascript" src="../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<style type="text/css">
+	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	.ui-widget-header { cursor: move; }
+	</style>
+	<script type="text/javascript">
+	$(function() {
+		$("#draggable").draggable({ handle: 'p' });
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+	<p class="ui-widget-header">I can be dragged only by this handle</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/draggable/helper.html b/demos/draggable/helper.html
new file mode 100644
index 000000000..4ff3e47ab
--- /dev/null
+++ b/demos/draggable/helper.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>jQuery UI Draggable - Helper</title>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+	<script type="text/javascript" src="../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<style type="text/css">
+	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	</style>
+	<script type="text/javascript">
+	$(function() {
+		$("#draggable").draggable({ helper: 'original' });
+		$("#draggable2").draggable({ helper: 'clone' });
+		$("#draggable3").draggable({
+			cursorAt: { top: -5, left: -5 },
+			helper: function(event) {
+				return $('<div class="ui-widget-header">I\'m a custom helper</div>');
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+	<p>Original</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+	<p>Clone</p>
+</div>
+
+<div id="draggable3" class="ui-widget-content">
+	<p>Custom helper (in combination with cursorAt)</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/draggable/index.html b/demos/draggable/index.html
index fed487781..8655800f3 100644
--- a/demos/draggable/index.html
+++ b/demos/draggable/index.html
@@ -14,6 +14,8 @@
 		<dd><a href="cursorat.html">cursorAt</a></dd>
 		<dd><a href="delaydistance.html">Delay / Distance</a></dd>
 		<dd><a href="grid.html">Grid</a></dd>
+		<dd><a href="handle.html">Handle</a></dd>
+		<dd><a href="helper.html">Helper</a></dd>
 </dl>
 
 </body>
