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/

Published Friday, February 20, 2009 5:26 AM by bmains
Filed under: ,

Comments

# re: JQuery Dragging and Dropping

Monday, February 23, 2009 7:35 AM by sonu

I have been using the drag and drop features of jquery for the new ADC controls as well. I replaced the asp.net ajax dnd version with that one and actually did some comparisons, where jquery is much faster then asp.net ajax.