Drag and Drop with jQuery UI

Jquery Course

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:

• axis - Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: 'x', 'y'.
• containment - Constrains dragging to within the bounds of the specified element or region. Values: 'parent', 'document', 'window', [x1, y1, x2, y2].
• cursor - The css cursor during the drag operation (pointer, move, crosshair, help, etc.).
• opacity - Opacity of the element while it's dragged.
• revert - If set to true, the element will return to its start position when dragging stops. Possible values: 'valid', 'invalid', 'true', 'false'. If set to "invalid", revert will only occur if the draggable has not been dropped on a droppable.
• revertDuration - The duration of the revert animation, in milliseconds (default: 500). Ignored if revert is false.
• zIndex - sets the z-index for the element while it's dragged.
• drag: function(event, ui) {...} - a function that is executed when the mouse is moved during the dragging.
  The parameters "event" and "ui" are optional; "event" represents the event which is triggered, "ui" represents the UI object:
          ui.position - position of the helper as { top, left } object, relative to the offset element.
          ui.offset - absolute position of the helper as { top, left } object, relative to page
• start: function(event, ui) {...} - a function that is executed when dragging starts. The parameters "event" and "ui" are optional.
• stop: function(event, ui) {...} - a function that is executed when dragging stops. The parameters "event" and "ui" are optional.

- 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:

• accept - specifies the elements (selector) that will be accepted.
• activeClass - specifies a class that will be added to the droppable while an acceptable draggable is being dragged.
• hoverClass - specifies a class that will be added to the droppable while an acceptable draggable is being hovered.
• activate: function(event, ui) { ... } - a function that is executed any time an accepted draggable starts dragging. The parameters "event" and "ui" are optional.
    $(this) represents the droppable
    ui.draggable represents the draggable.
• drop: function(event, ui) { ... } - a function that is executed when an accepted draggable is dropped 'over' this droppable.
  The parameters "event" and "ui" are optional.
  - $(this) represents the droppable
  - ui.draggable represents the draggable.

- 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:
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:

<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>

.some_class {
  line-height: 150%;
}

document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}

$ar_dir = scandir("dir_name");
var_export($ar_dir);