aboutsummaryrefslogtreecommitdiff
path: root/static/development-bundle/demos/droppable/propagation.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/development-bundle/demos/droppable/propagation.html')
-rw-r--r--static/development-bundle/demos/droppable/propagation.html71
1 files changed, 0 insertions, 71 deletions
diff --git a/static/development-bundle/demos/droppable/propagation.html b/static/development-bundle/demos/droppable/propagation.html
deleted file mode 100644
index e9c5026..0000000
--- a/static/development-bundle/demos/droppable/propagation.html
+++ /dev/null
@@ -1,71 +0,0 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Droppable - Prevent propagation</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.droppable.js"></script>
10 <link type="text/css" href="../demos.css" rel="stylesheet" />
11 <style type="text/css">
12 #draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
13 #droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
14 #droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
15 </style>
16 <script type="text/javascript">
17 $(function() {
18
19 $("#draggable").draggable();
20
21 $("#droppable, #droppable-inner").droppable({
22 activeClass: 'ui-state-hover',
23 hoverClass: 'ui-state-active',
24 drop: function(event, ui) {
25 $(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
26 return false;
27 }
28 });
29
30 $("#droppable2, #droppable2-inner").droppable({
31 greedy: true,
32 activeClass: 'ui-state-hover',
33 hoverClass: 'ui-state-active',
34 drop: function(event, ui) {
35 $(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
36 }
37 });
38
39 });
40 </script>
41</head>
42<body>
43<div class="demo">
44
45<div id="draggable" class="ui-widget-content">
46 <p>Drag me to my target</p>
47</div>
48
49<div id="droppable" class="ui-widget-header">
50 <p>Outer droppable</p>
51 <div id="droppable-inner" class="ui-widget-header">
52 <p>Inner droppable (not greedy)</p>
53 </div>
54</div>
55
56<div id="droppable2" class="ui-widget-header">
57 <p>Outer droppable</p>
58 <div id="droppable2-inner" class="ui-widget-header">
59 <p>Inner droppable (greedy)</p>
60 </div>
61</div>
62
63</div><!-- End demo -->
64
65<div class="demo-description">
66
67<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>
68
69</div><!-- End demo-description -->
70</body>
71</html>
© 2015 Mike Crute