aboutsummaryrefslogtreecommitdiffstats
path: root/demos/draggable
diff options
context:
space:
mode:
authorPaul Bakaus <paul.bakaus@googlemail.com>2008-12-31 14:02:14 +0000
committerPaul Bakaus <paul.bakaus@googlemail.com>2008-12-31 14:02:14 +0000
commite9a162a23c5aed036361b3843fc8f321912494de (patch)
tree7c884a4a13d4614d1d56a04a6ff405f1eddf4a68 /demos/draggable
parent5423b6d092aaaf14ffc7e81623702b363ef33849 (diff)
downloadjquery-ui-e9a162a23c5aed036361b3843fc8f321912494de.tar.gz
jquery-ui-e9a162a23c5aed036361b3843fc8f321912494de.zip
demos: added demo wrappers, fixed some issues with non explicit css rules
Diffstat (limited to 'demos/draggable')
-rw-r--r--demos/draggable/axis.html12
-rw-r--r--demos/draggable/containment.html12
-rw-r--r--demos/draggable/cursorat.html12
-rw-r--r--demos/draggable/default.html12
-rw-r--r--demos/draggable/delaydistance.html12
-rw-r--r--demos/draggable/grid.html12
-rw-r--r--demos/draggable/handle.html12
-rw-r--r--demos/draggable/helper.html10
-rw-r--r--demos/draggable/opacity.html12
-rw-r--r--demos/draggable/revert.html12
-rw-r--r--demos/draggable/scroll.html12
-rw-r--r--demos/draggable/snap.html12
-rw-r--r--demos/draggable/sortable.html18
-rw-r--r--demos/draggable/zindexstack.html12
14 files changed, 157 insertions, 15 deletions
diff --git a/demos/draggable/axis.html b/demos/draggable/axis.html
index 61dd072fb..e09137252 100644
--- a/demos/draggable/axis.html
+++ b/demos/draggable/axis.html
@@ -20,7 +20,8 @@
</script>
</head>
<body>
-
+<div class="demo">
+
<div id="draggable" class="ui-widget-content">
<p>I can be dragged only vertically</p>
</div>
@@ -29,5 +30,14 @@
<p>I can be dragged only horizontally</p>
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
</body>
</html>
diff --git a/demos/draggable/containment.html b/demos/draggable/containment.html
index 9ffc4c95b..8bcbb6556 100644
--- a/demos/draggable/containment.html
+++ b/demos/draggable/containment.html
@@ -19,7 +19,8 @@
</script>
</head>
<body>
-
+<div class="demo">
+
<div id="draggable" class="ui-widget-content">
<p>I'm contained within the window</p>
</div>
@@ -32,6 +33,15 @@
<p id="draggable3" class='ui-widget-header'>I'm contained within my parent</p>
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
<div style='width: 1px; height: 500px;'></div>
</body>
diff --git a/demos/draggable/cursorat.html b/demos/draggable/cursorat.html
index e1c0c1b52..ef4bdc5de 100644
--- a/demos/draggable/cursorat.html
+++ b/demos/draggable/cursorat.html
@@ -19,7 +19,8 @@
</script>
</head>
<body>
-
+<div class="demo">
+
<div id="draggable" class="ui-widget-content">
<p>I will always stick to the center (relative to the mouse)</p>
</div>
@@ -32,5 +33,14 @@
<p>My cursor position is only controlled for the 'bottom' value</p>
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
</body>
</html>
diff --git a/demos/draggable/default.html b/demos/draggable/default.html
index 55a454ab9..4989c4422 100644
--- a/demos/draggable/default.html
+++ b/demos/draggable/default.html
@@ -18,9 +18,21 @@
</head>
<body>
+<div class="demo">
+
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+The easiest way to make an element draggable. Hold down the mouse and drag it around.
+</p>
+
+</div><!-- End demo-description -->
+
</body>
</html>
diff --git a/demos/draggable/delaydistance.html b/demos/draggable/delaydistance.html
index 64b1ff684..ddca97184 100644
--- a/demos/draggable/delaydistance.html
+++ b/demos/draggable/delaydistance.html
@@ -18,7 +18,8 @@
</script>
</head>
<body>
-
+<div class="demo">
+
<div id="draggable" class="ui-widget-content">
<p>Only if you drag me by 20 pixels, the dragging will start</p>
</div>
@@ -27,5 +28,14 @@
<p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
</body>
</html>
diff --git a/demos/draggable/grid.html b/demos/draggable/grid.html
index 03741e4dc..0b717d7eb 100644
--- a/demos/draggable/grid.html
+++ b/demos/draggable/grid.html
@@ -18,7 +18,8 @@
</script>
</head>
<body>
-
+<div class="demo">
+
<div id="draggable" class="ui-widget-content">
<p>I can be dragged in a 20x20 grid system</p>
</div>
@@ -27,5 +28,14 @@
<p>I only follow a vertical 50 pixel grid</p>
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
</body>
</html>
diff --git a/demos/draggable/handle.html b/demos/draggable/handle.html
index 5dc950050..aa7acfd30 100644
--- a/demos/draggable/handle.html
+++ b/demos/draggable/handle.html
@@ -18,10 +18,20 @@
</script>
</head>
<body>
-
+<div class="demo">
+
<div id="draggable" class="ui-widget-content">
<p class="ui-widget-header">I can be dragged only by this handle</p>
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
</body>
</html>
diff --git a/demos/draggable/helper.html b/demos/draggable/helper.html
index 5bbdde4aa..0039b9895 100644
--- a/demos/draggable/helper.html
+++ b/demos/draggable/helper.html
@@ -25,6 +25,7 @@
</script>
</head>
<body>
+<div class="demo">
<div id="draggable" class="ui-widget-content">
<p>Original</p>
@@ -38,5 +39,14 @@
<p>Custom helper (in combination with cursorAt)</p>
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
</body>
</html>
diff --git a/demos/draggable/opacity.html b/demos/draggable/opacity.html
index b9e5481ec..652be35b5 100644
--- a/demos/draggable/opacity.html
+++ b/demos/draggable/opacity.html
@@ -18,7 +18,8 @@
</script>
</head>
<body>
-
+<div class="demo">
+
<div id="draggable1" class="ui-widget-content">
<p>Opacity set to 0.5</p>
</div>
@@ -27,5 +28,14 @@
<p>Opacity set to 0.5, using 'clone' as helper</p>
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
</body>
</html>
diff --git a/demos/draggable/revert.html b/demos/draggable/revert.html
index 87822f8cb..6e9ceae70 100644
--- a/demos/draggable/revert.html
+++ b/demos/draggable/revert.html
@@ -18,7 +18,8 @@
</script>
</head>
<body>
-
+<div class="demo">
+
<div id="draggable" class="ui-widget-content">
<p>Revert the original</p>
</div>
@@ -27,5 +28,14 @@
<p>Revert the helper</p>
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
</body>
</html>
diff --git a/demos/draggable/scroll.html b/demos/draggable/scroll.html
index ee1abd2f2..f4863e954 100644
--- a/demos/draggable/scroll.html
+++ b/demos/draggable/scroll.html
@@ -19,7 +19,8 @@
</script>
</head>
<body>
-
+<div class="demo">
+
<div id="draggable" class="ui-widget-content">
<p>Scroll set to true, default settings</p>
</div>
@@ -34,5 +35,14 @@
<div style='height: 5000px; width: 1px;'></div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
</body>
</html>
diff --git a/demos/draggable/snap.html b/demos/draggable/snap.html
index 0394196a5..1d76ca3cd 100644
--- a/demos/draggable/snap.html
+++ b/demos/draggable/snap.html
@@ -22,7 +22,8 @@
</script>
</head>
<body>
-
+<div class="demo">
+
<div id="snaptarget" class="ui-widget-header">
<p>I'm a snap target</p>
</div>
@@ -50,6 +51,15 @@
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
diff --git a/demos/draggable/sortable.html b/demos/draggable/sortable.html
index 292f3e31d..0e2df15c8 100644
--- a/demos/draggable/sortable.html
+++ b/demos/draggable/sortable.html
@@ -9,21 +9,22 @@
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
- ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
- li { margin: 3px; padding: 2px; width: 150px; }
+ #sortable { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
+ #sortable li { margin: 3px; padding: 2px; width: 150px; }
</style>
<script type="text/javascript">
$(function() {
$("#sortable").sortable();
$("#draggable").draggable({
- connectToSortable: ['ul'],
+ connectToSortable: ['#sortable'],
helper: 'clone'
});
});
</script>
</head>
<body>
-
+<div class="demo">
+
<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
@@ -36,5 +37,14 @@
<li class="ui-state-default">Item 5</li>
</ul>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
</body>
</html>
diff --git a/demos/draggable/zindexstack.html b/demos/draggable/zindexstack.html
index d41c6a5c6..bbbbba045 100644
--- a/demos/draggable/zindexstack.html
+++ b/demos/draggable/zindexstack.html
@@ -19,7 +19,8 @@
</script>
</head>
<body>
-
+<div class="demo">
+
<div id="draggable" class="ui-widget-content">
<p>I always have a higher z-index than my siblings during drag</p>
</div>
@@ -38,5 +39,14 @@
</div>
</div>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
</body>
</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-24 04:49:49 +0000