Build jQuery UI Droppable - Prevent propagation in JavaScript
Description
The following code shows how to build jQuery UI Droppable - Prevent propagation.
Example
<!-- Revised from demo code on http://jqueryui.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Prevent propagation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<!--from ww w . j a va2s . c o m-->
<style>
#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable, #droppable-inner" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "> p" )
.html( "Dropped!" );
return false;
}
});
$( "#droppable2, #droppable2-inner" ).droppable({
greedy: true,
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "> p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Outer droppable</p>
<div id="droppable-inner" class="ui-widget-header">
<p>Inner droppable (not greedy)</p>
</div>
</div>
<div id="droppable2" class="ui-widget-header">
<p>Outer droppable</p>
<div id="droppable2-inner" class="ui-widget-header">
<p>Inner droppable (greedy)</p>
</div>
</div>
<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>
</body>
</html>
The code above generates the following result.
Javascript Tutorial Droppable
Build jQuery UI Droppable - Accept in JavaS...
Build jQuery UI Droppable - Default functio...
Build jQuery UI Droppable - Shopping Cart D...
Build jQuery UI Droppable - Simple photo ma...
Build jQuery UI Droppable - Visual feedback...
Create a Droppable object in JavaScript
Disable, enable and destroy the draggable o...
Drop to different objects and get their id ...
Get relative and absolute position of the d...
Mark accepted object for droppable in JavaS...
Mark active class for droppable in JavaScri...
Build jQuery UI Droppable - Accept in JavaS...
Build jQuery UI Droppable - Default functio...
Build jQuery UI Droppable - Prevent propaga...
Build jQuery UI Droppable - Revert draggabl...Build jQuery UI Droppable - Shopping Cart D...
Build jQuery UI Droppable - Simple photo ma...
Build jQuery UI Droppable - Visual feedback...
Create a Droppable object in JavaScript
Disable, enable and destroy the draggable o...
Drop to different objects and get their id ...
Get relative and absolute position of the d...
Mark accepted object for droppable in JavaS...
Mark active class for droppable in JavaScri...