Droppable interaction depends on draggable element. In general, target region for draggable element is droppable. We can define a region on the page for dropping draggable elements. A callback can be called on dropping an element. Below script gives basic dropping feature:
<html>
<head>
<title>jQuery UI Droppable</title>
<link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.droppable.js"></script>
<style type="text/css">
.active
{
border: 5px solid #655e4e;
background: blue;
font-weight: bold;
outline-width: thick;
}
.hover
{
background: yellow;
text-decoration: none;
outline: none;
}
</style>
<script type="text/javascript">
$(function() {
//$("#draggable, #draggable1 ").draggable();//Shortcut to specify dragging for multiple items in single statement.
//Use accept property to specify target for draggable.
$("#draggable").draggable({ revert: 'invalid' }); //Reverts to previous location,when dragged without dropping
$("#draggable1").draggable({ revert: 'valid' }); //Reverts to previous location,when dropped
$('#Subdroppable').droppable({ greedy: true, cursor: 'move', activeClass: 'active', hoverClass: 'hover', drop: function(event, ui) { $('#Subdroppable').html('Element Dropped...'); } });
$('#droppable').droppable({ cursor: 'move', activeClass: 'active', hoverClass: 'hover', drop: function(event, ui) { $('#droppable').append('Element Dropped...'); } });
});
</script>
</head>
<body>
<div id="dragLimit" style="width: 400px; height: 400px">
<div id="draggable" class="ui-widget-content" style="width: 100px; height: 100px">
JQuery Enabled Dragging Area....</div>
<div id="draggable1" class="ui-widget-content" style="width: 100px; height: 100px">
JQuery Enabled Dragging Area[Invalid Drop] ....</div>
<div id="droppable" class="ui-widget-content" style="width: 500px; height: 500px">
Non Droppable Area....
<div id="Subdroppable" class="ui-widget-content" style="width: 300px; height: 300px">
Sub Droppable Area....</div>
</div>
</div>
</body>
</html>
We need below files to implement dragging:
-
jquery-1.3.2.js
-
ui.core.js
-
ui.draggable.js
-
ui.droppable.js
-
jquery-ui-1.7.2.custom.css taken from 'sunny' theme.
We need scripts for both draggable and droppable. Since, dropping can be done with draggable elements only. In above script, we specified draggable regions using draggable() function and defined droppable area using droppable() function. We can specify below options in droppable() function:
-
accept: This option helps us to specify valid draggables for the droppable region.
-
activeClass: To specify the style for the droppable, while accepted element is getting dragged.
-
hoverClass: To specify the style for the droppable, while accepted element is being hovered on droppable region.
-
greedy: If it is true, will prevent event propagation on nested droppables.
-
drop: callback function to be called on dropping the draggable element. In the callback, $(this) represents the droppable and ui.draggable represents the draggable.
-
revert: If it is 'valid', reverts draggable element to its old position on dropping. If it is 'invalid', than reverts draggable element to its old position on dragging without any drop.
For complete list of methods, events for Droppable API, refer: http://jqueryui.com/demos/droppable/.
I am ending the things here. I am attaching the source code with it. In coming articles, we will cover other interactions provided by JQuery UI in depth. I hope this article will be helpful for all.