r1614 - in trunk/demos: . draggable

Author: fg.maggie
Date: Thu Jan 15 13:57:33 2009
New Revision: 1614
Added:
trunk/demos/draggable/cursor-style.html
trunk/demos/draggable/delay-start.html
Modified:
trunk/demos/demos.css
trunk/demos/draggable/constrain-movement.html
trunk/demos/draggable/containment_iframe.html
trunk/demos/draggable/default.html
trunk/demos/draggable/events.html
trunk/demos/draggable/handle.html
trunk/demos/draggable/index.html
trunk/demos/draggable/revert.html
trunk/demos/draggable/scroll.html
trunk/demos/draggable/snap-to.html
trunk/demos/draggable/sortable.html
trunk/demos/draggable/visual-feedback.html
Log:
completed reorganization of draggable demos
Modified: trunk/demos/demos.css
==============================================================================
--- trunk/demos/demos.css    (original)
+++ trunk/demos/demos.css    Thu Jan 15 13:57:33 2009
@@ -188,7 +188,10 @@
    font-family: "Trebuchet
MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}
+#demo-frame div.demo h3 { clear:left; font-size:12px; font-weight:normal;
padding:0 0 1em; margin:0; }
+
div.demo-description {
+    clear:both;
    padding:12px;
    font-family: "Trebuchet
MS", "Arial", "Helvetica", "Verdana", "sans-serif";
    font-size: 1.3em;
Modified: trunk/demos/draggable/constrain-movement.html
==============================================================================
--- trunk/demos/draggable/constrain-movement.html    (original)
+++ trunk/demos/draggable/constrain-movement.html    Thu Jan 15 13:57:33 2009
@@ -1,43 +1,65 @@
<!doctype html>
<html lang="en">
<head>
-    <title>jQuery UI Draggable - Axis Demo</title>
+    <title>jQuery UI Draggable - Constrain movement</title>
    <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.3.js"></script>
    <script type="text/javascript" src="../../ui/ui.core.js"></script>
    <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
-    #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em;
float: left; margin: 5px; }
+    .draggable { width: 90px; height: 90px; padding: 0.5em; float: left;
margin: 5px; }
+    #draggable, #draggable2 { margin-bottom:20px; }
    #draggable { cursor: n-resize; }
    #draggable2 { cursor: e-resize; }
+    #containment-wrapper { width:100%; height:150px; border:2px solid #ccc; }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#draggable").draggable({ axis: 'y' });
        $("#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>

-<div id="draggable" class="ui-widget-content">
+<div id="draggable" class="draggable ui-widget-content">

I can be dragged only vertically

</div>
-<div id="draggable2" class="ui-widget-content">
+<div id="draggable2" class="draggable ui-widget-content">

I can be dragged only horizontally

</div>
-
+<h3>or to within another DOM element:</h3>
+<div id="containment-wrapper">
+<div id="draggable3" class="draggable ui-widget-content">
+

I'm contained within the box

+</div>
+
+<div id="draggable4" class="draggable ui-widget-content">
+

I'm contained within the box's parent

+</div>
+
+<div class="draggable ui-widget-content">
+ <p id="draggable5" class="ui-widget-header">I'm contained within my
parent
+</div>
+</div>
</div>
<div class="demo-description">

-Define the boundaries of the draggable area. Set the <strong>axis</strong>
option to limit the draggable's path to the x- or y-axis. Or use the
<strong>containment</strong> option to specify a parent DOM element or a
jQuery selector, like 'document.'
+Constrain the movement of each draggable by defining the boundaries of the
draggable area. Set the <strong>axis</strong> option to limit the
draggable's path to the x- or y-axis, or use the
<strong>containment</strong> option to specify a parent DOM element or a
jQuery selector, like 'document.'

</div>
Modified: trunk/demos/draggable/containment_iframe.html
==============================================================================
--- trunk/demos/draggable/containment_iframe.html    (original)
+++ trunk/demos/draggable/containment_iframe.html    Thu Jan 15 13:57:33 2009
@@ -8,7 +8,8 @@
    <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
-    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
+    div.demo { padding:0; }
+    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin:0 10px 0 0; }
    </style>
    <script type="text/javascript">
    $(function() {
Added: trunk/demos/draggable/cursor-style.html
==============================================================================
--- (empty file)
+++ trunk/demos/draggable/cursor-style.html    Thu Jan 15 13:57:33 2009
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Draggable - Cursor style</title>
+    <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
+    <script type="text/javascript" src="../../jquery-1.3.js"></script>
+    <script type="text/javascript" src="../../ui/ui.core.js"></script>
+    <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+    <style type="text/css">
+    #draggable, #draggable2, #draggable3 { width: 100px; height: 100px;
padding: 0.5em; float: left; margin: 5px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("#draggable").draggable({ cursorAt: { top: 56, left: 56 } });
+        $("#draggable2").draggable({ cursorAt: { top: -5, left: -5 } });
+        $("#draggable3").draggable({ cursorAt: { bottom: 0 } });
+    });
+    </script>
+</head>
+<body>
+<div class="demo">
+
+<div id="draggable" class="ui-widget-content">
+

I will always stick to the center (relative to the mouse)

+</div>
+
+<div id="draggable2" class="ui-widget-content">
+

My cursor is at left -5 and top -5

+</div>
+
+<div id="draggable3" class="ui-widget-content">
+

My cursor position is only controlled for the 'bottom' value

+</div>
+
+</div>
+
+<div class="demo-description">
+
+

+Position the cursor while dragging the object. By default the cursor
appears in the center of the dragged object; use the
<strong>cursorAt</strong> option to specify another location relative to
the draggable (specify a pixel value from the top, right, bottom, and/or
left). 
+

+
+</div>
+</body>
+</html>
Modified: trunk/demos/draggable/default.html
==============================================================================
--- trunk/demos/draggable/default.html    (original)
+++ trunk/demos/draggable/default.html    Thu Jan 15 13:57:33 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
-    <title>jQuery UI Draggable - Default Demo</title>
+    <title>jQuery UI Draggable - Default functionality</title>
    <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.3.js"></script>
    <script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -29,7 +29,7 @@
<div class="demo-description">

-The easiest way to make an element draggable. Hold down the mouse and drag
it around.
+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.

</div>
Added: trunk/demos/draggable/delay-start.html
==============================================================================
--- (empty file)
+++ trunk/demos/draggable/delay-start.html    Thu Jan 15 13:57:33 2009
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Draggable - Delay start</title>
+    <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
+    <script type="text/javascript" src="../../jquery-1.3.js"></script>
+    <script type="text/javascript" src="../../ui/ui.core.js"></script>
+    <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+    <style type="text/css">
+    #draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em;
float: left; margin: 5px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("#draggable").draggable({ distance: 20 });
+        $("#draggable2").draggable({ delay: 1000 });
+    });
+    </script>
+</head>
+<body>
+<div class="demo">
+
+<div id="draggable" class="ui-widget-content">
+

Only if you drag me by 20 pixels, the dragging will start

+</div>
+
+<div id="draggable2" class="ui-widget-content">
+

Regardless of the distance, you have to drag and wait for 1000ms
before dragging starts

+</div>
+
+</div>
+
+<div class="demo-description">
+
+

+Delay the start of dragging for a number of milliseconds with the
<strong>delay</strong> option; prevent dragging until the cursor is held
down and dragged a specifed number of pixels with the
<strong>distance</strong> option.
+

+
+</div>
+</body>
+</html>
Modified: trunk/demos/draggable/events.html
==============================================================================
--- trunk/demos/draggable/events.html    (original)
+++ trunk/demos/draggable/events.html    Thu Jan 15 13:57:33 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
-    <title>jQuery UI Draggable - Events Demo</title>
+    <title>jQuery UI Draggable - Events</title>
    <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.3.js"></script>
    <script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -65,7 +65,7 @@
<div class="demo-description">

-
+Layer functionality onto the draggable using the <strong>start</strong>,
<strong>drag</strong>, and <strong>stop</strong> events. Start is fired at
the start of the drag; drag during the drag; and stop when dragging stops.

</div>
Modified: trunk/demos/draggable/handle.html
==============================================================================
--- trunk/demos/draggable/handle.html    (original)
+++ trunk/demos/draggable/handle.html    Thu Jan 15 13:57:33 2009
@@ -1,19 +1,20 @@
<!doctype html>
<html lang="en">
<head>
-    <title>jQuery UI Draggable - Handle Demo</title>
+    <title>jQuery UI Draggable - Handles</title>
    <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.3.js"></script>
    <script type="text/javascript" src="../../ui/ui.core.js"></script>
    <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
-    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left;
margin: 5px; }
+    #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em;
float: left; margin: 5px; }
    #draggable p { cursor: move; }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#draggable").draggable({ handle: 'p' });
+        $("#draggable2").draggable({ cancel: "p.ui-widget-header" });
    });
    </script>
</head>
@@ -24,15 +25,19 @@
    <p class="ui-widget-header">I can be dragged only by this handle
</div>
+<div id="draggable2" class="ui-widget-content">
+

You can drag me around…

+ <p class="ui-widget-header">…but you can't drag me by this
handle.
+</div>
+

</div>
<div class="demo-description">
-

-
-

Allow dragging only when the cursor is over a specific part of the
draggable. Use the <strong>handle</strong> option to specify the jQuery
selector of an element (or group of elements) used to drag the object.

Or prevent dragging when the cursor is over a specific element (or
group of elements) within the draggable. Use the <strong>cancel</strong>
option to specify a jQuery selector over which to "cancel" draggable
functionality.

</div>
</body>
Modified: trunk/demos/draggable/index.html
==============================================================================
--- trunk/demos/draggable/index.html    (original)
+++ trunk/demos/draggable/index.html    Thu Jan 15 13:57:33 2009
@@ -13,7 +13,7 @@
        <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 grid or element</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>
Modified: trunk/demos/draggable/revert.html
==============================================================================
--- trunk/demos/draggable/revert.html    (original)
+++ trunk/demos/draggable/revert.html    Thu Jan 15 13:57:33 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
-    <title>jQuery UI Draggable - Revert Demo</title>
+    <title>jQuery UI Draggable - Revert position</title>
    <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.3.js"></script>
    <script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -33,7 +33,7 @@
<div class="demo-description">

-
+Return the draggable (or it's helper) to its original location when
dragging stops with the boolean <strong>revert</strong> option.

</div>
Modified: trunk/demos/draggable/scroll.html
==============================================================================
--- trunk/demos/draggable/scroll.html    (original)
+++ trunk/demos/draggable/scroll.html    Thu Jan 15 13:57:33 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
-    <title>jQuery UI Draggable - Scroll Demo</title>
+    <title>jQuery UI Draggable - Auto-scroll</title>
    <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.3.js"></script>
    <script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -40,7 +40,7 @@
<div class="demo-description">

-
+Automatically scroll the document when the draggable is moved beyond the
viewport. Set the <strong>scroll</strong> option to true to enable
auto-scrolling, and fine-tune when scrolling is triggered and its speed
with the <strong>scrollSensitivity</strong> and
<strong>scrollSpeed</strong> options.

</div>
Modified: trunk/demos/draggable/snap-to.html
==============================================================================
--- trunk/demos/draggable/snap-to.html    (original)
+++ trunk/demos/draggable/snap-to.html    Thu Jan 15 13:57:33 2009
@@ -1,14 +1,14 @@
<!doctype html>
<html lang="en">
<head>
-    <title>jQuery UI Draggable - Snap Demo</title>
+    <title>jQuery UI Draggable - Snap to element or grid</title>
    <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.3.js"></script>
    <script type="text/javascript" src="../../ui/ui.core.js"></script>
    <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
-    #draggable, #draggable2, #draggable3, #draggable4, #draggable5 { width:
100px; height: 80px; padding: 5px; float: left; margin: 5px;
font-size: .9em; }
+    .draggable { width: 90px; height: 80px; padding: 5px; float: left;
margin: 5px; font-size: .9em; }
    .ui-widget-header p, .ui-widget-content p { margin: 0; }
    #snaptarget { height: 140px; }
    </style>
@@ -17,8 +17,8 @@
        $("#draggable").draggable({ snap: true });
        $("#draggable2").draggable({ snap: '.ui-widget-header' });
        $("#draggable3").draggable({ snap: '.ui-widget-header',
snapMode: 'outer' });
-        $("#draggable4").draggable({ snap: '.ui-widget-header',
snapMode: 'inner' });
-        $("#draggable5").draggable({ snap: '.ui-widget-header', snapTolerance:
50 });
+        $("#draggable4").draggable({ grid: [20,20] });
+        $("#draggable5").draggable({ grid: [80, 80] });
    });
    </script>
</head>
@@ -31,36 +31,33 @@
<br clear="both" />
-<div id="draggable" class="ui-widget-content">
+<div id="draggable" class="draggable ui-widget-content">

Default (snap: true), snaps to all other draggable elements

</div>
-<div id="draggable2" class="ui-widget-content">
+<div id="draggable2" class="draggable ui-widget-content">

I only snap to the big box

</div>
-<div id="draggable3" class="ui-widget-content">
+<div id="draggable3" class="draggable ui-widget-content">

I only snap to the outer edges of the bix box

</div>
-<div id="draggable4" class="ui-widget-content">
-

I only snap to the inner edges of the big box

+<div id="draggable4" class="draggable ui-widget-content">
+

I snap to a 20 x 20 grid

</div>
-<div id="draggable5" class="ui-widget-content">
-

I also snap to the big box but I'm very sticky because I have a high
tolerance

+<div id="draggable5" class="draggable ui-widget-content">
+

I snap to a 80 x 80 grid

</div>
-
-
-
</div>
<div class="demo-description">
-

-
-

Snap the draggable to the inner or outer boundaries of a DOM element.
Use the <strong>snap</strong>, <strong>snapMode</strong> (inner, outer,
both), and <strong>snapTolerance</strong> (distance in pixels the draggable
must be from the element when snapping is invoked) options.

+
+

Or snap the draggable to a grid. Set the dimensions of grid cells
(height and width in pixels) with the <strong>grid</strong> option.

</div>
Modified: trunk/demos/draggable/sortable.html
==============================================================================
--- trunk/demos/draggable/sortable.html    (original)
+++ trunk/demos/draggable/sortable.html    Thu Jan 15 13:57:33 2009
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
-    <title>jQuery UI Draggable - Sortable Demo</title>
+    <title>jQuery UI Draggable + Sortable</title>
    <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.3.js"></script>
    <script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -45,7 +45,7 @@
<div class="demo-description">

-
+Draggables are built to interact seamlessly with <a href="#">sortables</a>.

</div>
Modified: trunk/demos/draggable/visual-feedback.html
==============================================================================
--- trunk/demos/draggable/visual-feedback.html    (original)
+++ trunk/demos/draggable/visual-feedback.html    Thu Jan 15 13:57:33 2009
@@ -1,19 +1,22 @@
<!doctype html>
<html lang="en">
<head>
-    <title>jQuery UI Draggable - Helper Demo</title>
+    <title>jQuery UI Draggable - Visual feedback</title>
    <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.3.js"></script>
    <script type="text/javascript" src="../../ui/ui.core.js"></script>
    <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
-    #draggable, #draggable2, #draggable3 { width: 100px; height: 100px;
padding: 0.5em; float: left; margin: 5px; }
+    #draggable, #draggable2, #draggable3, #set div { width: 90px; height:
90px; padding: 0.5em; float: left; margin: 5px; }
+    #draggable, #draggable2, #draggable3 { margin-bottom:20px; }
+    #set { clear:both; float:left; width: 368px; height: 120px; }
+    p { clear:both; margin:0; padding:1em 0; }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#draggable").draggable({ helper: 'original' });
-        $("#draggable2").draggable({ helper: 'clone' });
+        $("#draggable2").draggable({ opacity: 0.7, helper: 'clone' });
        $("#draggable3").draggable({
            cursor: 'move',
            cursorAt: { top: -12, left: -20 },
@@ -21,33 +24,49 @@
                return $('<div class="ui-widget-header">I\'m a custom helper</div>');
            }
        });
+        $("#set div").draggable({ stack: { group: '#set div', min: 1 } });
    });
    </script>
</head>
<body>
<div class="demo">
+<h3>With helpers:</h3>
+
<div id="draggable" class="ui-widget-content">

Original

</div>
<div id="draggable2" class="ui-widget-content">
-

Clone

Semi-transparent clone

</div>
<div id="draggable3" class="ui-widget-content">

Custom helper (in combination with cursorAt)

</div>
-
+<h3>Stacked:</h3>
+<div id="set">
+ <div class="ui-widget-content">
+

We are draggables..

+    </div>
+
+    <div class="ui-widget-content">
+

..whose z-indexes are controlled automatically..

+    </div>
+
+    <div class="ui-widget-content">
+

..with the stack option.

+ </div>
+</div>
</div>
<div class="demo-description">
-

-
-

Provide feedback to users as they drag an object in the form of a
helper. The <strong>helper</strong> 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 <strong>opacity</strong> option.

+
+

To clarify which draggable is in play, bring the draggable in motion to
front. Use the <strong>zindex</strong> option to set a higher z-index for
the helper, if in play, or use the <strong>stack</strong> option to ensure
that the last item dragged will appear on top of others in the same group
on drag stop.

</div>
</body>