Drag and Drop with jQuery UI

Drag and Drop is a cool effect that can be used to create interesting and useful actions on a web page.
To create easily a drag and drop effect with jQuery, you need to use jQuery UI, which is a library of additional functions to the main jQuery library.
The jQuery UI is like a plugin that contains lots of functions to create special effects with jQuery. So, you need to include in your web page both jQuery library and jQuery UI.
- You can download jQuery UI from this page: Download jQuery UI


The "drag and drop" effect is created with the draggable() and droppable() functions.
The draggable() method enables draggable functionality on any DOM element, so you can move it with your mouse. This method has the following sintax:
$('selector').draggable({ option: value });
- option: value - represents one ore more option/value pairs that configure the draggable() function. There are lots of options for this function, here's some of them: - A complete list with the options for draggable() method can be found at Draggable.

• The droppable() method enables any DOM element to be droppable, a target for draggable elements. It has the following sintax:
$('selector').droppable({ option: value });
- option: value - represents one ore more option/value pairs that configure the droppable() method. Here's some of them: - A complete list with the options for droppable() method can be found at Droppable.

Example 1:
Three images and a DIV that can be dragged anywhere on the page and dropped into a droppable container. When the elements are dropped, they disappear with an animated hide effect. The droppable contains an element "Show", when it is clicked makes the dropped items visible.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Drag and Drop</title>
<style type="text/css"><!--
#drop {
 width:200px;
 height:150px;
 margin:3px auto;
 background:#eddaa8;
 font-size:16px;
}
#drop #sw { text-decoration:underline; cursor:pointer; }
#drag {
 width:450px;
 height:180px;
 margin:12px auto;
 border:1px solid silver;
 font-size:16px;
}
#drag .drg { margin:10px 12px; }
#drag div.drg {
 width:150px;
 height:50px;
 background:#07da08;
 border:2px solid blue;
}
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // sets the draggable
  $('#drag .drg').draggable({
    cursor: 'move',          // sets the cursor apperance
    revert: 'valid'
  });

  // sets droppable
  $('#drop').droppable({
    drop: function(event, ui) {
      // after the draggable is droped, hides it with a hide() effect
      ui.draggable.hide(1000);
    }
  });

  // when the "#sw" element (inside the "#drop") is clicked
  // show the items with class "drg", contained in "#drag"
  $('#drop #sw').click(function(){
    $('#drag .drg').slideDown(1000);
  });
});
--></script>
</head>
<body>
<div id="drop">Drop here &nbsp; &nbsp; &nbsp; &nbsp; <span id="sw">Show</span></div>
<div id="drag">
 Drag these images:<br />
 <img src="circle.gif" alt="circle" width="45" height="45" class="drg" />
 <img src="triangle.gif" alt="triangle" width="65" height="55" class="drg" />
 <img src="rhomb.gif" alt="rhomb" width="70" height="55" class="drg" />
 <div class="drg">DIV with some content. Click and drag</div>
</div>
</body>
</html>
Demo:
Drop here         Show
Drag these images:
circle triangle rhomb
DIV with some content. Click and drag

Example 2:
Here's another example, to see the difference and effect when you define some options. We use the same HTML elements, but this time with more options applied to the draggable() and droppable() methods.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Drag and Drop</title>
<style type="text/css"><!--
#drop {
 width:200px;
 height:150px;
 margin:3px auto;
 background:#eddaa8;
 font-size:16px;
}
#drop.drp { background:#f1ef08; }
#drop #sw { text-decoration:underline; cursor:pointer; }
#drag {
 width:450px;
 height:180px;
 margin:12px auto;
 border:1px solid silver;
 font-size:16px;
}
#drag .drg { margin:10px 12px; }
#drag div.drg {
 width:150px;
 height:50px;
 background:#07da08;
 border:2px solid blue;
}
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // sets the draggable and define its options
  $('#drag .drg').draggable({
    cursor: 'move',          // sets the cursor apperance
    revert: 'invalid',       // makes the item to return if it isn't placed into droppable
    revertDuration: 900,     // duration while the item returns to its place
    opacity: 0.35            // opacity while the element is dragged
  });

  // define options for droppable
  $('#drop').droppable({
    accept: 'img.drg',            // accept only images with class 'drg'
    activeClass: 'drp',           // add class "drp" while an accepted item is dragged
    drop: function(event, ui) {
      // after the draggable is droped, hides it with a hide() effect
      ui.draggable.hide(1000);
    }
  });

  // when the "#sw" element (inside the "#drop") is clicked
  // show the items with class "drg", contained in "#drag"
  $('#drop #sw').click(function(){
    $('#drag .drg').slideDown(1000);
  });
});
--></script>
</head>
<body>
<div id="drop">Drop here &nbsp; &nbsp; &nbsp; &nbsp; <span id="sw">Show</span></div>
<div id="drag">
 Drag these images:<br />
 <img src="circle.gif" alt="circle" width="45" height="45" class="drg" />
 <img src="triangle.gif" alt="triangle" width="65" height="55" class="drg" />
 <img src="rhomb.gif" alt="rhomb" width="70" height="55" class="drg" />
 <div class="drg">DIV with some content. Click and drag</div>
</div>
</body>
</html>
- revert: 'invalid' - makes the element to return to its position if it isn't placed into droppable; and - evertDuration: 900 - sets the duration of the return to 900 milliseconds.
- opacity: 0.35 - adds an effect of transparency to the element while it's dragged.
- activeClass: 'drp' - adds class "drp" to droppable element while an item is dragged.

The DIV can't be dropped into droppable because there is defined the option:   accept: 'img.drg'   (accepts only <img> elements with class="drg").
In this example, when you click on the "Show" element, the items that were hidden appear in the location where they have been hidden, but in the first example they appear in the place where they were visible. This difference is made by the values "valid" and "invalid" of the revert option.
Demo:
Drop here         Show
Drag these images:
circle triangle rhomb
DIV with some content. Click and drag