diff options
Diffstat (limited to 'static/development-bundle/demos/draggable')
12 files changed, 622 insertions, 0 deletions
diff --git a/static/development-bundle/demos/draggable/constrain-movement.html b/static/development-bundle/demos/draggable/constrain-movement.html new file mode 100644 index 0000000..73496bb --- /dev/null +++ b/static/development-bundle/demos/draggable/constrain-movement.html | |||
@@ -0,0 +1,67 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Draggable - Constrain movement</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
9 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } | ||
12 | #draggable, #draggable2 { margin-bottom:20px; } | ||
13 | #draggable { cursor: n-resize; } | ||
14 | #draggable2 { cursor: e-resize; } | ||
15 | #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px;} | ||
16 | </style> | ||
17 | <script type="text/javascript"> | ||
18 | $(function() { | ||
19 | $("#draggable").draggable({ axis: 'y' }); | ||
20 | $("#draggable2").draggable({ axis: 'x' }); | ||
21 | |||
22 | $("#draggable3").draggable({ containment: '#containment-wrapper', scroll: false }); | ||
23 | $("#draggable4").draggable({ containment: '#demo-frame' }); | ||
24 | $("#draggable5").draggable({ containment: 'parent' }); | ||
25 | |||
26 | }); | ||
27 | </script> | ||
28 | </head> | ||
29 | <body> | ||
30 | <div class="demo"> | ||
31 | |||
32 | <h3 class="docs">Constrain movement along an axis:</h3> | ||
33 | |||
34 | <div id="draggable" class="draggable ui-widget-content"> | ||
35 | <p>I can be dragged only vertically</p> | ||
36 | </div> | ||
37 | |||
38 | <div id="draggable2" class="draggable ui-widget-content"> | ||
39 | <p>I can be dragged only horizontally</p> | ||
40 | </div> | ||
41 | |||
42 | <h3 class="docs">Or to within another DOM element:</h3> | ||
43 | <div id="containment-wrapper"> | ||
44 | <div id="draggable3" class="draggable ui-widget-content"> | ||
45 | <p>I'm contained within the box</p> | ||
46 | </div> | ||
47 | |||
48 | <div id="draggable4" class="draggable ui-widget-content"> | ||
49 | <p>I'm contained within the box's parent</p> | ||
50 | </div> | ||
51 | |||
52 | <div class="draggable ui-widget-content"> | ||
53 | <p id="draggable5" class="ui-widget-header">I'm contained within my parent</p> | ||
54 | </div> | ||
55 | </div> | ||
56 | |||
57 | </div><!-- End demo --> | ||
58 | |||
59 | <div class="demo-description"> | ||
60 | |||
61 | <p> | ||
62 | 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.' | ||
63 | </p> | ||
64 | |||
65 | </div><!-- End demo-description --> | ||
66 | </body> | ||
67 | </html> | ||
diff --git a/static/development-bundle/demos/draggable/cursor-style.html b/static/development-bundle/demos/draggable/cursor-style.html new file mode 100644 index 0000000..14b3b29 --- /dev/null +++ b/static/development-bundle/demos/draggable/cursor-style.html | |||
@@ -0,0 +1,46 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Draggable - Cursor style</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
9 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } | ||
12 | </style> | ||
13 | <script type="text/javascript"> | ||
14 | $(function() { | ||
15 | $("#draggable").draggable({ cursorAt: { cursor: 'move', top: 56, left: 56 } }); | ||
16 | $("#draggable2").draggable({ cursorAt: { cursor: 'crosshair', top: -5, left: -5 } }); | ||
17 | $("#draggable3").draggable({ cursorAt: { bottom: 0 } }); | ||
18 | }); | ||
19 | </script> | ||
20 | </head> | ||
21 | <body> | ||
22 | <div class="demo"> | ||
23 | |||
24 | <div id="draggable" class="ui-widget-content"> | ||
25 | <p>I will always stick to the center (relative to the mouse)</p> | ||
26 | </div> | ||
27 | |||
28 | <div id="draggable2" class="ui-widget-content"> | ||
29 | <p>My cursor is at left -5 and top -5</p> | ||
30 | </div> | ||
31 | |||
32 | <div id="draggable3" class="ui-widget-content"> | ||
33 | <p>My cursor position is only controlled for the 'bottom' value</p> | ||
34 | </div> | ||
35 | |||
36 | </div><!-- End demo --> | ||
37 | |||
38 | <div class="demo-description"> | ||
39 | |||
40 | <p> | ||
41 | 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. | ||
42 | </p> | ||
43 | |||
44 | </div><!-- End demo-description --> | ||
45 | </body> | ||
46 | </html> | ||
diff --git a/static/development-bundle/demos/draggable/default.html b/static/development-bundle/demos/draggable/default.html new file mode 100644 index 0000000..344accc --- /dev/null +++ b/static/development-bundle/demos/draggable/default.html | |||
@@ -0,0 +1,38 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Draggable - Default functionality</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
9 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | #draggable { width: 150px; height: 150px; padding: 0.5em; } | ||
12 | </style> | ||
13 | <script type="text/javascript"> | ||
14 | $(function() { | ||
15 | $("#draggable").draggable(); | ||
16 | }); | ||
17 | </script> | ||
18 | </head> | ||
19 | <body> | ||
20 | |||
21 | <div class="demo"> | ||
22 | |||
23 | <div id="draggable" class="ui-widget-content"> | ||
24 | <p>Drag me around</p> | ||
25 | </div> | ||
26 | |||
27 | </div><!-- End demo --> | ||
28 | |||
29 | <div class="demo-description"> | ||
30 | |||
31 | <p> | ||
32 | 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. | ||
33 | </p> | ||
34 | |||
35 | </div><!-- End demo-description --> | ||
36 | |||
37 | </body> | ||
38 | </html> | ||
diff --git a/static/development-bundle/demos/draggable/delay-start.html b/static/development-bundle/demos/draggable/delay-start.html new file mode 100644 index 0000000..6f49d17 --- /dev/null +++ b/static/development-bundle/demos/draggable/delay-start.html | |||
@@ -0,0 +1,42 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Draggable - Delay start</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
9 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | #draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } | ||
12 | </style> | ||
13 | <script type="text/javascript"> | ||
14 | $(function() { | ||
15 | $("#draggable").draggable({ distance: 20 }); | ||
16 | $("#draggable2").draggable({ delay: 1000 }); | ||
17 | $(".ui-draggable").disableSelection(); | ||
18 | }); | ||
19 | </script> | ||
20 | </head> | ||
21 | <body> | ||
22 | <div class="demo"> | ||
23 | |||
24 | <div id="draggable" class="ui-widget-content"> | ||
25 | <p>Only if you drag me by 20 pixels, the dragging will start</p> | ||
26 | </div> | ||
27 | |||
28 | <div id="draggable2" class="ui-widget-content"> | ||
29 | <p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p> | ||
30 | </div> | ||
31 | |||
32 | </div><!-- End demo --> | ||
33 | |||
34 | <div class="demo-description"> | ||
35 | |||
36 | <p> | ||
37 | 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. | ||
38 | </p> | ||
39 | |||
40 | </div><!-- End demo-description --> | ||
41 | </body> | ||
42 | </html> | ||
diff --git a/static/development-bundle/demos/draggable/events.html b/static/development-bundle/demos/draggable/events.html new file mode 100644 index 0000000..ca13a9f --- /dev/null +++ b/static/development-bundle/demos/draggable/events.html | |||
@@ -0,0 +1,74 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Draggable - Events</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
9 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | #draggable { width: 16em; padding: 0 1em; } | ||
12 | #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; } | ||
13 | #draggable ul li span.ui-icon { float: left; } | ||
14 | #draggable ul li span.count { font-weight: bold; } | ||
15 | </style> | ||
16 | <script type="text/javascript"> | ||
17 | $(function() { | ||
18 | var $start_counter = $('#event-start'), $drag_counter = $('#event-drag'), $stop_counter = $('#event-stop'); | ||
19 | var counts = [0,0,0]; | ||
20 | |||
21 | $("#draggable").draggable({ | ||
22 | start: function() { | ||
23 | counts[0]++; | ||
24 | updateCounterStatus($start_counter,counts[0]); | ||
25 | }, | ||
26 | drag: function() { | ||
27 | counts[1]++; | ||
28 | updateCounterStatus($drag_counter,counts[1]); | ||
29 | }, | ||
30 | stop: function() { | ||
31 | counts[2]++; | ||
32 | updateCounterStatus($stop_counter,counts[2]); | ||
33 | } | ||
34 | }); | ||
35 | }); | ||
36 | |||
37 | function updateCounterStatus($event_counter,new_count) { | ||
38 | // first update the status visually... | ||
39 | if (!$event_counter.hasClass('ui-state-hover')) { | ||
40 | $event_counter.addClass('ui-state-hover') | ||
41 | .siblings().removeClass('ui-state-hover'); | ||
42 | } | ||
43 | // ...then update the numbers | ||
44 | $('span.count',$event_counter).text(new_count); | ||
45 | } | ||
46 | </script> | ||
47 | </head> | ||
48 | <body> | ||
49 | |||
50 | <div class="demo"> | ||
51 | |||
52 | <div id="draggable" class="ui-widget ui-widget-content"> | ||
53 | |||
54 | <p>Drag me to trigger the chain of events.</p> | ||
55 | |||
56 | <ul class="ui-helper-reset"> | ||
57 | <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li> | ||
58 | <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li> | ||
59 | <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li> | ||
60 | </ul> | ||
61 | </div> | ||
62 | |||
63 | </div><!-- End demo --> | ||
64 | |||
65 | <div class="demo-description"> | ||
66 | |||
67 | <p> | ||
68 | 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. | ||
69 | </p> | ||
70 | |||
71 | </div><!-- End demo-description --> | ||
72 | |||
73 | </body> | ||
74 | </html> | ||
diff --git a/static/development-bundle/demos/draggable/handle.html b/static/development-bundle/demos/draggable/handle.html new file mode 100644 index 0000000..8433a1e --- /dev/null +++ b/static/development-bundle/demos/draggable/handle.html | |||
@@ -0,0 +1,45 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Draggable - Handles</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
9 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } | ||
12 | #draggable p { cursor: move; } | ||
13 | </style> | ||
14 | <script type="text/javascript"> | ||
15 | $(function() { | ||
16 | $("#draggable").draggable({ handle: 'p' }); | ||
17 | $("#draggable2").draggable({ cancel: "p.ui-widget-header" }); | ||
18 | $("div, p").disableSelection(); | ||
19 | }); | ||
20 | </script> | ||
21 | </head> | ||
22 | <body> | ||
23 | <div class="demo"> | ||
24 | |||
25 | <div id="draggable" class="ui-widget-content"> | ||
26 | <p class="ui-widget-header">I can be dragged only by this handle</p> | ||
27 | </div> | ||
28 | |||
29 | <div id="draggable2" class="ui-widget-content"> | ||
30 | <p>You can drag me around…</p> | ||
31 | <p class="ui-widget-header">…but you can't drag me by this handle.</p> | ||
32 | </div> | ||
33 | |||
34 | <!-- ADD CANCEL DEMO --> | ||
35 | |||
36 | </div><!-- End demo --> | ||
37 | |||
38 | <div class="demo-description"> | ||
39 | |||
40 | <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> | ||
41 | <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> | ||
42 | |||
43 | </div><!-- End demo-description --> | ||
44 | </body> | ||
45 | </html> | ||
diff --git a/static/development-bundle/demos/draggable/index.html b/static/development-bundle/demos/draggable/index.html new file mode 100644 index 0000000..ba15243 --- /dev/null +++ b/static/development-bundle/demos/draggable/index.html | |||
@@ -0,0 +1,27 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Draggable Demos</title> | ||
5 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
6 | </head> | ||
7 | <body> | ||
8 | |||
9 | <div class="demos-nav"> | ||
10 | <h4>Examples</h4> | ||
11 | <ul> | ||
12 | <li class="demo-config-on"><a href="default.html">Default functionality</a></li> | ||
13 | <li><a href="events.html">Events</a></li> | ||
14 | <li><a href="constrain-movement.html">Constrain movement</a></li> | ||
15 | <li><a href="delay-start.html">Delay start</a></li> | ||
16 | <li><a href="snap-to.html">Snap to element or grid</a></li> | ||
17 | <li><a href="scroll.html">Auto-scroll</a></li> | ||
18 | <li><a href="revert.html">Revert position</a></li> | ||
19 | <li><a href="visual-feedback.html">Visual feedback</a></li> | ||
20 | <li><a href="handle.html">Drag handle</a></li> | ||
21 | <li><a href="cursor-style.html">Cursor style</a></li> | ||
22 | <li><a href="sortable.html">Draggable + Sortable</a></li> | ||
23 | </ul> | ||
24 | </div> | ||
25 | |||
26 | </body> | ||
27 | </html> | ||
diff --git a/static/development-bundle/demos/draggable/revert.html b/static/development-bundle/demos/draggable/revert.html new file mode 100644 index 0000000..8433640 --- /dev/null +++ b/static/development-bundle/demos/draggable/revert.html | |||
@@ -0,0 +1,41 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Draggable - Revert position</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
9 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } | ||
12 | </style> | ||
13 | <script type="text/javascript"> | ||
14 | $(function() { | ||
15 | $("#draggable").draggable({ revert: true }); | ||
16 | $("#draggable2").draggable({ revert: true, helper: 'clone' }); | ||
17 | }); | ||
18 | </script> | ||
19 | </head> | ||
20 | <body> | ||
21 | <div class="demo"> | ||
22 | |||
23 | <div id="draggable" class="ui-widget-content"> | ||
24 | <p>Revert the original</p> | ||
25 | </div> | ||
26 | |||
27 | <div id="draggable2" class="ui-widget-content"> | ||
28 | <p>Revert the helper</p> | ||
29 | </div> | ||
30 | |||
31 | </div><!-- End demo --> | ||
32 | |||
33 | <div class="demo-description"> | ||
34 | |||
35 | <p> | ||
36 | Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option. | ||
37 | </p> | ||
38 | |||
39 | </div><!-- End demo-description --> | ||
40 | </body> | ||
41 | </html> | ||
diff --git a/static/development-bundle/demos/draggable/scroll.html b/static/development-bundle/demos/draggable/scroll.html new file mode 100644 index 0000000..201ce9c --- /dev/null +++ b/static/development-bundle/demos/draggable/scroll.html | |||
@@ -0,0 +1,48 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Draggable - Auto-scroll</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
9 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } | ||
12 | </style> | ||
13 | <script type="text/javascript"> | ||
14 | $(function() { | ||
15 | $("#draggable").draggable({ scroll: true }); | ||
16 | $("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 }); | ||
17 | $("#draggable3").draggable({ scroll: true, scrollSpeed: 100 }); | ||
18 | }); | ||
19 | </script> | ||
20 | </head> | ||
21 | <body> | ||
22 | <div class="demo"> | ||
23 | |||
24 | <div id="draggable" class="ui-widget-content"> | ||
25 | <p>Scroll set to true, default settings</p> | ||
26 | </div> | ||
27 | |||
28 | <div id="draggable2" class="ui-widget-content"> | ||
29 | <p>scrollSensitivity set to 100</p> | ||
30 | </div> | ||
31 | |||
32 | <div id="draggable3" class="ui-widget-content"> | ||
33 | <p>scrollSpeed set to 100</p> | ||
34 | </div> | ||
35 | |||
36 | <div style='height: 5000px; width: 1px;'></div> | ||
37 | |||
38 | </div><!-- End demo --> | ||
39 | |||
40 | <div class="demo-description"> | ||
41 | |||
42 | <p> | ||
43 | 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. | ||
44 | </p> | ||
45 | |||
46 | </div><!-- End demo-description --> | ||
47 | </body> | ||
48 | </html> | ||
diff --git a/static/development-bundle/demos/draggable/snap-to.html b/static/development-bundle/demos/draggable/snap-to.html new file mode 100644 index 0000000..43c0585 --- /dev/null +++ b/static/development-bundle/demos/draggable/snap-to.html | |||
@@ -0,0 +1,67 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Draggable - Snap to element or grid</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
9 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } | ||
12 | .ui-widget-header p, .ui-widget-content p { margin: 0; } | ||
13 | #snaptarget { height: 140px; } | ||
14 | </style> | ||
15 | <script type="text/javascript"> | ||
16 | $(function() { | ||
17 | $("#draggable").draggable({ snap: true }); | ||
18 | $("#draggable2").draggable({ snap: '.ui-widget-header' }); | ||
19 | $("#draggable3").draggable({ snap: '.ui-widget-header', snapMode: 'outer' }); | ||
20 | $("#draggable4").draggable({ grid: [20,20] }); | ||
21 | $("#draggable5").draggable({ grid: [80, 80] }); | ||
22 | }); | ||
23 | </script> | ||
24 | </head> | ||
25 | <body> | ||
26 | <div class="demo"> | ||
27 | |||
28 | <div id="snaptarget" class="ui-widget-header"> | ||
29 | <p>I'm a snap target</p> | ||
30 | </div> | ||
31 | |||
32 | <br clear="both" /> | ||
33 | |||
34 | <div id="draggable" class="draggable ui-widget-content"> | ||
35 | <p>Default (snap: true), snaps to all other draggable elements</p> | ||
36 | </div> | ||
37 | |||
38 | <div id="draggable2" class="draggable ui-widget-content"> | ||
39 | <p>I only snap to the big box</p> | ||
40 | </div> | ||
41 | |||
42 | <div id="draggable3" class="draggable ui-widget-content"> | ||
43 | <p>I only snap to the outer edges of the big box</p> | ||
44 | </div> | ||
45 | |||
46 | <div id="draggable4" class="draggable ui-widget-content"> | ||
47 | <p>I snap to a 20 x 20 grid</p> | ||
48 | </div> | ||
49 | |||
50 | <div id="draggable5" class="draggable ui-widget-content"> | ||
51 | <p>I snap to a 80 x 80 grid</p> | ||
52 | </div> | ||
53 | |||
54 | </div><!-- End demo --> | ||
55 | |||
56 | <div class="demo-description"> | ||
57 | |||
58 | <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> | ||
59 | |||
60 | <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> | ||
61 | |||
62 | </div><!-- End demo-description --> | ||
63 | |||
64 | |||
65 | |||
66 | </body> | ||
67 | </html> | ||
diff --git a/static/development-bundle/demos/draggable/sortable.html b/static/development-bundle/demos/draggable/sortable.html new file mode 100644 index 0000000..6f15be4 --- /dev/null +++ b/static/development-bundle/demos/draggable/sortable.html | |||
@@ -0,0 +1,54 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Draggable + Sortable</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
9 | <script type="text/javascript" src="../../ui/ui.sortable.js"></script> | ||
10 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
11 | <style type="text/css"> | ||
12 | .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } | ||
13 | .demo li { margin: 5px; padding: 5px; width: 150px; } | ||
14 | </style> | ||
15 | <script type="text/javascript"> | ||
16 | $(function() { | ||
17 | $("#sortable").sortable({ | ||
18 | revert: true | ||
19 | }); | ||
20 | $("#draggable").draggable({ | ||
21 | connectToSortable: '#sortable', | ||
22 | helper: 'clone', | ||
23 | revert: 'invalid' | ||
24 | }) | ||
25 | $("ul, li").disableSelection(); | ||
26 | }); | ||
27 | </script> | ||
28 | </head> | ||
29 | <body> | ||
30 | <div class="demo"> | ||
31 | |||
32 | <ul> | ||
33 | <li id="draggable" class="ui-state-highlight">Drag me down</li> | ||
34 | </ul> | ||
35 | |||
36 | <ul id="sortable"> | ||
37 | <li class="ui-state-default">Item 1</li> | ||
38 | <li class="ui-state-default">Item 2</li> | ||
39 | <li class="ui-state-default">Item 3</li> | ||
40 | <li class="ui-state-default">Item 4</li> | ||
41 | <li class="ui-state-default">Item 5</li> | ||
42 | </ul> | ||
43 | |||
44 | </div><!-- End demo --> | ||
45 | |||
46 | <div class="demo-description"> | ||
47 | |||
48 | <p> | ||
49 | Draggables are built to interact seamlessly with <a href="#">sortables</a>. | ||
50 | </p> | ||
51 | |||
52 | </div><!-- End demo-description --> | ||
53 | </body> | ||
54 | </html> | ||
diff --git a/static/development-bundle/demos/draggable/visual-feedback.html b/static/development-bundle/demos/draggable/visual-feedback.html new file mode 100644 index 0000000..25c42fd --- /dev/null +++ b/static/development-bundle/demos/draggable/visual-feedback.html | |||
@@ -0,0 +1,73 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Draggable - Visual feedback</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/ui.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/ui.draggable.js"></script> | ||
9 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | #draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } | ||
12 | #draggable, #draggable2, #draggable3 { margin-bottom:20px; } | ||
13 | #set { clear:both; float:left; width: 368px; height: 120px; } | ||
14 | p { clear:both; margin:0; padding:1em 0; } | ||
15 | </style> | ||
16 | <script type="text/javascript"> | ||
17 | $(function() { | ||
18 | $("#draggable").draggable({ helper: 'original' }); | ||
19 | $("#draggable2").draggable({ opacity: 0.7, helper: 'clone' }); | ||
20 | $("#draggable3").draggable({ | ||
21 | cursor: 'move', | ||
22 | cursorAt: { top: -12, left: -20 }, | ||
23 | helper: function(event) { | ||
24 | return $('<div class="ui-widget-header">I\'m a custom helper</div>'); | ||
25 | } | ||
26 | }); | ||
27 | $("#set div").draggable({ stack: { group: '#set div', min: 1 } }); | ||
28 | }); | ||
29 | </script> | ||
30 | </head> | ||
31 | <body> | ||
32 | <div class="demo"> | ||
33 | |||
34 | <h3 class="docs">With helpers:</h3> | ||
35 | |||
36 | <div id="draggable" class="ui-widget-content"> | ||
37 | <p>Original</p> | ||
38 | </div> | ||
39 | |||
40 | <div id="draggable2" class="ui-widget-content"> | ||
41 | <p>Semi-transparent clone</p> | ||
42 | </div> | ||
43 | |||
44 | <div id="draggable3" class="ui-widget-content"> | ||
45 | <p>Custom helper (in combination with cursorAt)</p> | ||
46 | </div> | ||
47 | |||
48 | <h3 class="docs">Stacked:</h3> | ||
49 | <div id="set"> | ||
50 | <div class="ui-widget-content"> | ||
51 | <p>We are draggables..</p> | ||
52 | </div> | ||
53 | |||
54 | <div class="ui-widget-content"> | ||
55 | <p>..whose z-indexes are controlled automatically..</p> | ||
56 | </div> | ||
57 | |||
58 | <div class="ui-widget-content"> | ||
59 | <p>..with the stack option.</p> | ||
60 | </div> | ||
61 | </div> | ||
62 | |||
63 | </div><!-- End demo --> | ||
64 | |||
65 | <div class="demo-description"> | ||
66 | |||
67 | <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> | ||
68 | |||
69 | <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> | ||
70 | |||
71 | </div><!-- End demo-description --> | ||
72 | </body> | ||
73 | </html> | ||