aboutsummaryrefslogtreecommitdiffstats
path: root/demos/droppable
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/droppable
parent9e259c6e5369bf272dd14df7aea1372c5b064300 (diff)
downloadjquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.tar.gz
jquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.zip
Demos: Cleanup.
Diffstat (limited to 'demos/droppable')
-rw-r--r--demos/droppable/accepted-elements.html11
-rw-r--r--demos/droppable/default.html11
-rw-r--r--demos/droppable/index.html24
-rw-r--r--demos/droppable/photo-manager.html12
-rw-r--r--demos/droppable/propagation.html11
-rw-r--r--demos/droppable/revert.html11
-rw-r--r--demos/droppable/shopping-cart.html11
-rw-r--r--demos/droppable/visual-feedback.html16
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 &#8212; for example, you may have an editable directory structure displayed as a tree, with folder and document nodes &#8212; 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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-23 03:03:29 +0000