aboutsummaryrefslogtreecommitdiffstats
path: root/demos/draggable
diff options
context:
space:
mode:
authorScott González <scott.gonzalez@gmail.com>2012-09-10 11:33:46 -0400
committerScott González <scott.gonzalez@gmail.com>2012-09-10 11:33:46 -0400
commit303f20e1b3c977d75047bed1a3533a180d73fab5 (patch)
treec8cf97b57f2493313dfd92c1dfceedb29d137d67 /demos/draggable
parent9e259c6e5369bf272dd14df7aea1372c5b064300 (diff)
downloadjquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.tar.gz
jquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.zip
Demos: Cleanup.
Diffstat (limited to 'demos/draggable')
-rw-r--r--demos/draggable/constrain-movement.html33
-rw-r--r--demos/draggable/cursor-style.html11
-rw-r--r--demos/draggable/default.html11
-rw-r--r--demos/draggable/delay-start.html11
-rw-r--r--demos/draggable/events.html11
-rw-r--r--demos/draggable/handle.html13
-rw-r--r--demos/draggable/index.html32
-rw-r--r--demos/draggable/revert.html11
-rw-r--r--demos/draggable/scroll.html11
-rw-r--r--demos/draggable/snap-to.html11
-rw-r--r--demos/draggable/sortable.html17
-rw-r--r--demos/draggable/visual-feedback.html11
12 files changed, 48 insertions, 135 deletions
diff --git a/demos/draggable/constrain-movement.html b/demos/draggable/constrain-movement.html
index 4e7c9f685..aa1d97508 100644
--- a/demos/draggable/constrain-movement.html
+++ b/demos/draggable/constrain-movement.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -16,6 +16,7 @@
#draggable { cursor: n-resize; }
#draggable2 { cursor: e-resize; }
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
+ h3 { clear: left; }
</style>
<script>
$(function() {
@@ -23,17 +24,14 @@
$( "#draggable2" ).draggable({ axis: "x" });
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
- $( "#draggable4" ).draggable({ containment: "#demo-frame" });
$( "#draggable5" ).draggable({ containment: "parent" });
});
</script>
</head>
<body>
-<div class="demo">
+<h3>Constrain movement along an axis:</h3>
-<h3 class="docs">Constrain movement along an axis:</h3>
-
<div id="draggable" class="draggable ui-widget-content">
<p>I can be dragged only vertically</p>
</div>
@@ -42,28 +40,19 @@
<p>I can be dragged only horizontally</p>
</div>
-<h3 class="docs">Or to within another DOM element:</h3>
+<h3>Or to within another DOM element:</h3>
<div id="containment-wrapper">
-<div id="draggable3" class="draggable ui-widget-content">
- <p>I'm contained within the box</p>
-</div>
-
-<div id="draggable4" class="draggable ui-widget-content">
- <p>I'm contained within the box's parent</p>
-</div>
+ <div id="draggable3" class="draggable ui-widget-content">
+ <p>I'm contained within the box</p>
+ </div>
-<div class="draggable ui-widget-content">
- <p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
+ <div class="draggable ui-widget-content">
+ <p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
+ </div>
</div>
-</div>
-
-</div><!-- End demo -->
-
-
<div class="demo-description">
<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/draggable/cursor-style.html b/demos/draggable/cursor-style.html
index 6dd31b51f..256071af8 100644
--- a/demos/draggable/cursor-style.html
+++ b/demos/draggable/cursor-style.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -23,8 +23,6 @@
</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>
@@ -37,13 +35,8 @@
<p>My cursor position is only controlled for the 'bottom' value</p>
</div>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/draggable/default.html b/demos/draggable/default.html
index 52d68d150..dc2a3d461 100644
--- a/demos/draggable/default.html
+++ b/demos/draggable/default.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -21,19 +21,12 @@
</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>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/draggable/delay-start.html b/demos/draggable/delay-start.html
index 63c997778..78dcdca13 100644
--- a/demos/draggable/delay-start.html
+++ b/demos/draggable/delay-start.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -23,8 +23,6 @@
</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>
@@ -33,13 +31,8 @@
<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>Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. </p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/draggable/events.html b/demos/draggable/events.html
index efb659d25..95ae1adca 100644
--- a/demos/draggable/events.html
+++ b/demos/draggable/events.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -52,8 +52,6 @@
</head>
<body>
-<div class="demo">
-
<div id="draggable" class="ui-widget ui-widget-content">
<p>Drag me to trigger the chain of events.</p>
@@ -65,13 +63,8 @@
</ul>
</div>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/draggable/handle.html b/demos/draggable/handle.html
index 8a2bfa008..4aed5827a 100644
--- a/demos/draggable/handle.html
+++ b/demos/draggable/handle.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -24,8 +24,6 @@
</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>
@@ -35,16 +33,9 @@
<p class="ui-widget-header">&hellip;but you can't drag me by this handle.</p>
</div>
-<!-- ADD CANCEL DEMO -->
-
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Allow dragging only when the cursor is over a specific part of the draggable. Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
<p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/draggable/index.html b/demos/draggable/index.html
index 0beda8e72..93850684d 100644
--- a/demos/draggable/index.html
+++ b/demos/draggable/index.html
@@ -1,28 +1,24 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable Demos</title>
- <link rel="stylesheet" href="../demos.css">
</head>
<body>
-<div class="demos-nav">
- <h4>Examples</h4>
- <ul>
- <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
- <li><a href="events.html">Events</a></li>
- <li><a href="constrain-movement.html">Constrain movement</a></li>
- <li><a href="delay-start.html">Delay start</a></li>
- <li><a href="snap-to.html">Snap to element or&#160;grid</a></li>
- <li><a href="scroll.html">Auto-scroll</a></li>
- <li><a href="revert.html">Revert position</a></li>
- <li><a href="visual-feedback.html">Visual feedback</a></li>
- <li><a href="handle.html">Drag handle</a></li>
- <li><a href="cursor-style.html">Cursor style</a></li>
- <li><a href="sortable.html">Draggable + Sortable</a></li>
- </ul>
-</div>
+<ul>
+ <li><a href="default.html">Default functionality</a></li>
+ <li><a href="events.html">Events</a></li>
+ <li><a href="constrain-movement.html">Constrain movement</a></li>
+ <li><a href="delay-start.html">Delay start</a></li>
+ <li><a href="snap-to.html">Snap to element or grid</a></li>
+ <li><a href="scroll.html">Auto-scroll</a></li>
+ <li><a href="revert.html">Revert position</a></li>
+ <li><a href="visual-feedback.html">Visual feedback</a></li>
+ <li><a href="handle.html">Drag handle</a></li>
+ <li><a href="cursor-style.html">Cursor style</a></li>
+ <li><a href="sortable.html">Draggable + Sortable</a></li>
+</ul>
</body>
</html>
diff --git a/demos/draggable/revert.html b/demos/draggable/revert.html
index 6e656a2b0..b18190d84 100644
--- a/demos/draggable/revert.html
+++ b/demos/draggable/revert.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -22,8 +22,6 @@
</head>
<body>
-<div class="demo">
-
<div id="draggable" class="ui-widget-content">
<p>Revert the original</p>
</div>
@@ -32,13 +30,8 @@
<p>Revert the helper</p>
</div>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/draggable/scroll.html b/demos/draggable/scroll.html
index 611845631..8be467f49 100644
--- a/demos/draggable/scroll.html
+++ b/demos/draggable/scroll.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -23,8 +23,6 @@
</head>
<body>
-<div class="demo">
-
<div id="draggable" class="ui-widget-content">
<p>Scroll set to true, default settings</p>
</div>
@@ -39,13 +37,8 @@
<div style='height: 5000px; width: 1px;'></div>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/draggable/snap-to.html b/demos/draggable/snap-to.html
index fed879f82..a399db5d6 100644
--- a/demos/draggable/snap-to.html
+++ b/demos/draggable/snap-to.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -27,8 +27,6 @@
</head>
<body>
-<div class="demo">
-
<div id="snaptarget" class="ui-widget-header">
<p>I'm a snap target</p>
</div>
@@ -55,14 +53,9 @@
<p>I snap to a 80 x 80 grid</p>
</div>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Snap the draggable to the inner or outer boundaries of a DOM element. Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p>
<p>Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/draggable/sortable.html b/demos/draggable/sortable.html
index c8f2d545d..0bf674ff3 100644
--- a/demos/draggable/sortable.html
+++ b/demos/draggable/sortable.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -12,8 +12,8 @@
<script src="../../ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
- .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
- .demo li { margin: 5px; padding: 5px; width: 150px; }
+ ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
+ li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script>
$(function() {
@@ -31,8 +31,6 @@
</head>
<body>
-<div class="demo">
-
<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
@@ -45,13 +43,8 @@
<li class="ui-state-default">Item 5</li>
</ul>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
-<p>Draggables are built to interact seamlessly with <a href="#">sortables</a>.</p>
-</div><!-- End demo-description -->
-
+<p>Draggables are built to interact seamlessly with <a href="http://jqueryui.com/sortable">sortables</a>.</p>
+</div>
</body>
</html>
diff --git a/demos/draggable/visual-feedback.html b/demos/draggable/visual-feedback.html
index fe1c8aaec..b7e59b309 100644
--- a/demos/draggable/visual-feedback.html
+++ b/demos/draggable/visual-feedback.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -33,8 +33,6 @@
</head>
<body>
-<div class="demo">
-
<h3 class="docs">With helpers:</h3>
<div id="draggable" class="ui-widget-content">
@@ -64,14 +62,9 @@
</div>
</div>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p>
<p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 23:08:30 +0000