From d185e8cc05d0b50b4f688e0e2bcba15f39b33f21 Mon Sep 17 00:00:00 2001
From: Eduardo Lundgren <eduardolundgren@gmail.com>
Date: Mon, 9 Jun 2008 06:20:15 +0000
Subject: - Added functional demo application - Removed datepicker folder from
 functional demo folder

---
 demos/functional/templates/ui.draggable.html | 85 ++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 demos/functional/templates/ui.draggable.html

(limited to 'demos/functional/templates/ui.draggable.html')

diff --git a/demos/functional/templates/ui.draggable.html b/demos/functional/templates/ui.draggable.html
new file mode 100644
index 000000000..94aca5774
--- /dev/null
+++ b/demos/functional/templates/ui.draggable.html
@@ -0,0 +1,85 @@
+<script type="text/javascript">
+
+	var model = {
+
+		renderAt: '#containerDemo',
+
+		title: 'Draggable Demos',
+
+		demos: [
+
+			{
+				title: 'Simple image drag',
+				desc: 'You also can make images draggable!',
+				html: '<img id="dragImage" src="templates/images/puppy.jpg" style="width: 228px; height:157px;">',
+				destroy: '$("#dragImage").draggable("destroy");',
+
+				options: [
+					{	desc: 'Using a helper clone',	source: '$("#dragImage").draggable({ helper: "clone" });' },
+					{	desc: 'Simple Drag',	source: '$("#dragImage").draggable();' },
+					{	desc: 'Axis x',	source: '$("#dragImage").draggable({ axis: "x" });' },
+					{	desc: 'Axis y',	source: '$("#dragImage").draggable({ axis: "y" });' },
+					{	desc: 'Axis x, Change cursor',	source: '$("#dragImage").draggable({ axis: "x", cursor: "move" });' },
+					{	desc: 'Cursor position [top/left]',	source: '$("#dragImage").draggable({ cursorAt: {top: 2, left: 2 } });' },
+					{	desc: 'Cursor position [right/bottom]',	source: '$("#dragImage").draggable({ cursorAt: {bottom: 20, right: 14} });' },
+					{	desc: 'Drag on a Grid',	source: '$("#dragImage").draggable({ grid: [50, 50] });' },
+					{	desc: 'Change the opacity',	source: '$("#dragImage").draggable({ opacity: 0.40 });' },
+					{	desc: 'Drag and Revert to the original position',	source: '$("#dragImage").draggable({ revert: true, helper: "clone" });' }
+				]
+			},
+
+			{
+				title: 'Drag div element',
+				desc: 'With few lines of code you could make a div draggable. You can try more options on the fly!',
+				html: '<div id="divDrag" class="draggable">Drag me</div><br>',
+				destroy: '$("#divDrag").draggable("destroy");',
+				options: [
+					{	desc: 'Simple Drag',	source: '$("#divDrag").draggable();' },
+					{	desc: 'Dragging elements in a Region',	source: '$("#divDrag").draggable({ containment: "parent" });' },
+					{	desc: 'Axis x',	source: '$("#divDrag").draggable({ axis: "x" });' },
+					{	desc: 'Axis y',	source: '$("#divDrag").draggable({ axis: "y" });' },
+					{	desc: 'Axis x, Change cursor',	source: '$("#divDrag").draggable({ axis: "x", cursor: "move" });' },
+					{	desc: 'Cursor position [top/left]',	source: '$("#divDrag").draggable({ cursorAt: {top: 2, left: 2 } });' },
+					{	desc: 'Cursor position [right/bottom]',	source: '$("#divDrag").draggable({ cursorAt: {bottom: 20, right: 14} });' },
+					{	desc: 'Drag on a Grid',	source: '$("#divDrag").draggable({ grid: [50, 50] });' },
+					{	desc: 'Using a helper clone',	source: '$("#divDrag").draggable({ helper: "clone" });' },
+					{	desc: 'Change the opacity',	source: '$("#divDrag").draggable({ opacity: 0.40 });' },
+					{	desc: 'Drag and Revert to the original position',	source: '$("#divDrag").draggable({ revert: true, helper: "clone" });' }
+				]
+			},
+
+			{
+				title: 'Drag with a handle',
+				desc: 'Drag element by a handle.',
+				html: '<div id="draggable-handle-div" class="draggable"><div class="drag-handle"></div>Drag me</div>',
+				destroy: '$("#draggable-handle-div").draggable("destroy");',
+
+				options: [
+					{	desc: 'Drag using a handle',	source: '$("#draggable-handle-div").draggable({ handle: "div" });' },
+					{	desc: 'Drag using a handle with a helper',	source: '$("#draggable-handle-div").draggable({ helper: "clone", handle: "div" });' }
+				]
+			},
+
+			{
+				title: 'Drag prevention for pre-defined elements',
+				desc: 'You can change elements to not drag the parent.',
+				html: '<div id="draggable-dragPrevention" class="draggable"><a href="#">Drag me</a><br><input type="text" value="select me" style="width: 90px; font-size: 10px;" /></div>',
+				destroy: '$("#draggable-dragPrevention").draggable("destroy");',
+
+				options: [
+					{	desc: 'Drag using a handle',	source: '$("#draggable-dragPrevention").draggable({ dragPrevention: "a,input,textarea" });' },
+					{	desc: 'Drag using a handle with a helper',	source: '$("#draggable-dragPrevention").draggable({ helper: "clone", dragPrevention: "a,input,textarea" });' }
+				]
+			}
+
+		]
+
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
+</script>
\ No newline at end of file
-- 
cgit v1.2.3