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:

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 droppableui.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.

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.

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