JQuery Dragging and Dropping
It's really easy to perform dragging and dropping in JQuery. Let's begin by looking at the content that can be dragged or dropped.
<div id="Drag1" class="Draggable">
Drag Content
</div>
<div id="Drag2" class="Draggable">
Drag Content
</div>
<br><br>
<div id="Drop" class="Droppable">
Drop Here
</div>
Here we have three div's; the first two define the content that can be dragged, and the last defines the drop region. The css classes aren't important, they simply style the container and do not add anything pertinent to this function, except they identify the objects that can be dragged/dropped.
The scripts used from JQuery are defined below:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.core.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.draggable.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.droppable.js"></script>
The first script is the JQuery script, along with a core script for UI (contains common functions and such). The next scripts are the draggable/droppable scripts that perform the drag and drop functions, the core to this script. Below is the script to perform the drag/drop. Notice how easy it is.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".Draggable").draggable();
$(".Droppable").droppable({
hoverClass: "DroppableHover",
drop: function(ev, ui)
{
$(this).append("Dropped");
}
});
});
</script>
All of the elements defining the Draggable class are returned and call the draggable() method, marking the elment as draggable. There are a couple of options when it comes to the draggable method, most notably the ability to provide a range of settings to define the drag behavior. The droppable feature works the same way; provided above is a class with various settings for defining the behaviors of the drop. Below is some more information about the settings for drag/drop
http://docs.jquery.com/UI/Draggable
http://docs.jquery.com/UI/Droppable
Notice the drop method. The drop method is fired when the element is dropped; $(this) references the drop div, which appends the text "Dropped" in its body as a sign it received the drop. For more of a demo, check out this: http://jqueryui.com/demos/droppable/