diff options
Diffstat (limited to 'demos/droppable')
| -rw-r--r-- | demos/droppable/accepted-elements.html | 11 | ||||
| -rw-r--r-- | demos/droppable/default.html | 11 | ||||
| -rw-r--r-- | demos/droppable/index.html | 24 | ||||
| -rw-r--r-- | demos/droppable/photo-manager.html | 12 | ||||
| -rw-r--r-- | demos/droppable/propagation.html | 11 | ||||
| -rw-r--r-- | demos/droppable/revert.html | 11 | ||||
| -rw-r--r-- | demos/droppable/shopping-cart.html | 11 | ||||
| -rw-r--r-- | demos/droppable/visual-feedback.html | 16 |
8 files changed, 30 insertions, 77 deletions
diff --git a/demos/droppable/accepted-elements.html b/demos/droppable/accepted-elements.html index 537eaf54a..5a2820fc8 100644 --- a/demos/droppable/accepted-elements.html +++ b/demos/droppable/accepted-elements.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -34,8 +34,6 @@ </head> <body> -<div class="demo"> - <div id="draggable-nonvalid" class="ui-widget-content"> <p>I'm draggable but can't be dropped</p> </div> @@ -48,13 +46,8 @@ <p>accept: '#draggable'</p> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/default.html b/demos/droppable/default.html index b3c28ff5f..6dbc8d08f 100644 --- a/demos/droppable/default.html +++ b/demos/droppable/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -31,8 +31,6 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> @@ -41,13 +39,8 @@ <p>Drop here</p> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Enable any DOM element to be droppable, a target for draggable elements.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/index.html b/demos/droppable/index.html index 13ae9855e..deca6e4bc 100644 --- a/demos/droppable/index.html +++ b/demos/droppable/index.html @@ -1,24 +1,20 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Droppable 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="accepted-elements.html">Accepted elements</a></li> - <li><a href="propagation.html">Prevent propagation</a></li> - <li><a href="visual-feedback.html">Visual feedback</a></li> - <li><a href="revert.html">Revert draggable position</a></li> - <li><a href="shopping-cart.html">Shopping Cart</a></li> - <li><a href="photo-manager.html">Simple photo manager</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="accepted-elements.html">Accepted elements</a></li> + <li><a href="propagation.html">Prevent propagation</a></li> + <li><a href="visual-feedback.html">Visual feedback</a></li> + <li><a href="revert.html">Revert draggable position</a></li> + <li><a href="shopping-cart.html">Shopping Cart</a></li> + <li><a href="photo-manager.html">Simple photo manager</a></li> +</ul> </body> </html> diff --git a/demos/droppable/photo-manager.html b/demos/droppable/photo-manager.html index 638a35caf..d71d303b4 100644 --- a/demos/droppable/photo-manager.html +++ b/demos/droppable/photo-manager.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -38,7 +38,7 @@ $( "li", $gallery ).draggable({ cancel: "a.ui-icon", // clicking an icon won't initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position - containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present + containment: "document", helper: "clone", cursor: "move" }); @@ -138,7 +138,7 @@ </head> <body> -<div class="demo ui-widget ui-helper-clearfix"> +<div class="ui-widget ui-helper-clearfix"> <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> <li class="ui-widget-content ui-corner-tr"> @@ -171,14 +171,12 @@ <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4> </div> -</div><!-- End demo --> - +</div> <div class="demo-description"> <p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p> <p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p> <p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/propagation.html b/demos/droppable/propagation.html index 6cdbf3cc1..0ee5ce85b 100644 --- a/demos/droppable/propagation.html +++ b/demos/droppable/propagation.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -48,8 +48,6 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> @@ -68,13 +66,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/revert.html b/demos/droppable/revert.html index 897a3bf84..e3b94bce1 100644 --- a/demos/droppable/revert.html +++ b/demos/droppable/revert.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -35,8 +35,6 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget-content"> <p>I revert when I'm dropped</p> </div> @@ -49,13 +47,8 @@ <p>Drop me here</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 set on the draggable.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/shopping-cart.html b/demos/droppable/shopping-cart.html index f93d8b41a..52d079749 100644 --- a/demos/droppable/shopping-cart.html +++ b/demos/droppable/shopping-cart.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -48,8 +48,6 @@ </head> <body> -<div class="demo"> - <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog"> @@ -89,13 +87,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding them to a shopping cart, where they are sortable.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/visual-feedback.html b/demos/droppable/visual-feedback.html index fef2a2743..c97d056e8 100644 --- a/demos/droppable/visual-feedback.html +++ b/demos/droppable/visual-feedback.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -14,6 +14,7 @@ <style> #draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; } + h3 { clear: left; } </style> <script> $(function() { @@ -44,10 +45,8 @@ </head> <body> -<div class="demo"> +<h3>Feedback on hover:</h3> -<h3 class="docs">Feedback on hover:</h3> - <div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> @@ -56,7 +55,7 @@ <p>Drop here</p> </div> -<h3 class="docs">Feedback on activating draggable:</h3> +<h3>Feedback on activating draggable:</h3> <div id="draggable2" class="ui-widget-content"> <p>Drag me to my target</p> @@ -66,13 +65,8 @@ <p>Drop here</p> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p> -</div><!-- End demo-description --> - +</div> </body> </html> |