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; }
16
<script type="text/javascript">
19
$("#draggable").draggable();
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!');
30
$("#droppable2, #droppable2-inner").droppable({
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!');
45
<div id="draggable" class="ui-widget-content">
46
<p>Drag me to my target</p>
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>
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>
63
</div><!-- End demo -->
65
<div class="demo-description">
67
<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>
69
</div><!-- End demo-description -->