Skip to content
Permalink
Browse files

completed reorganization of draggable demos

  • Loading branch information
Maggie Costello Wachs
Maggie Costello Wachs committed Jan 15, 2009
1 parent 3530c1f commit c1447173c659c78e036b5c4c6bc91de26e84a13b
@@ -188,7 +188,10 @@ div.demo {
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;
@@ -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">
<p>I can be dragged only vertically</p>
</div>

<div id="draggable2" class="ui-widget-content">
<div id="draggable2" class="draggable ui-widget-content">
<p>I can be dragged only horizontally</p>
</div>

<!-- ADD CONTAINMENT EXAMPLE -->
<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 class="draggable ui-widget-content">
<p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
</div>
</div>

</div><!-- End demo -->

<div class="demo-description">

<p>
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.'
</p>

</div><!-- End demo-description -->
@@ -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() {
@@ -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">
<p>I will always stick to the center (relative to the mouse)</p>
</div>

<div id="draggable2" class="ui-widget-content">
<p>My cursor is at left -5 and top -5</p>
</div>

<div id="draggable3" class="ui-widget-content">
<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 <strong>cursorAt</strong> 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 <strong>cursor</strong> option with a valid CSS cursor value: default, move, pointer, crosshair, etc. -->
</p>

</div><!-- End demo-description -->
</body>
</html>
@@ -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">

<p>
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.
</p>

</div><!-- End demo-description -->
@@ -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">
<p>Only if you drag me by 20 pixels, the dragging will start</p>
</div>

<div id="draggable2" class="ui-widget-content">
<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 <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.
</p>

</div><!-- End demo-description -->
</body>
</html>
@@ -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">

<p>
<!-- Add description here -->
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.
</p>

</div><!-- End demo-description -->
@@ -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</p>
</div>

<div id="draggable2" class="ui-widget-content">
<p>You can drag me around&hellip;</p>
<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>
<!-- Add description here -->
</p>
<p>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.</p>
<p>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.</p>

</div><!-- End demo-description -->
</body>
@@ -13,7 +13,7 @@ <h4>Examples</h4>
<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>
@@ -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">

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

</div><!-- End demo-description -->
@@ -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">

<p>
<!-- Add description here -->
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.
</p>

</div><!-- End demo-description -->
@@ -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">
<p>Default (snap: true), snaps to all other draggable elements</p>
</div>

<div id="draggable2" class="ui-widget-content">
<div id="draggable2" class="draggable ui-widget-content">
<p>I only snap to the big box</p>
</div>

<div id="draggable3" class="ui-widget-content">
<div id="draggable3" class="draggable ui-widget-content">
<p>I only snap to the outer edges of the bix box</p>
</div>

<div id="draggable4" class="ui-widget-content">
<p>I only snap to the inner edges of the big box</p>
<div id="draggable4" class="draggable ui-widget-content">
<p>I snap to a 20 x 20 grid</p>
</div>

<div id="draggable5" class="ui-widget-content">
<p>I also snap to the big box but I'm very sticky because I have a high tolerance</p>
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>


<!-- ADD GRID EXAMPLE -->

</div><!-- End demo -->

<div class="demo-description">

<p>
<!-- Add description here -->
</p>
<p>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. </p>

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

</div><!-- End demo-description -->

0 comments on commit c144717

Please sign in to comment.
You can’t perform that action at this time.