Interface elements for jQuery - Documentation - Dropables

Droppables

This plugin works only with Draggables plugin. Creates target drop zones for draggable elements.

example

Options:

accept string mandatory the class name for draggables to get accepted by the droppable
activeclass string optional when an acceptable draggable is moved the droppable gets this class
hoverclass string optional when an acceptable draggable is inside the droppable, the droppable dets this class
tolerance 'pointer', 'intersect' or 'fit' optional points how the draggble must be against the droppable
onDrop function optional when an accepted draggble is drop on a droppable this functin is called. Applies to the droppable and gets as parameter the draggable DOMElement
onHover function optional called when an accepted draggble is hovering a droppable. Applies to the droppable and gets as parameter the draggable DOMElement
onOut function optional called when an accepted draggble is leaving a droppable. Applies to the droppable and gets as parameter the draggable DOMElement

Code sample:

$('#dropzone1').Droppable(
{
accept : 'dropaccept',
activeclass: 'dropzoneactive',
hoverclass: 'dropzonehover',
ondrop: function (drag)
{
alert(this); //the droppable
alert(drag); //the dragganle
},
fit: true
}
);

DroppableDestroy

A droppable can be destroyed at anytime.

Code sample:

$('#dropzone1').DroppableDestroy();

recallDroppable

Function useful when you add/change droppable while dragging an element.

Code sample:

$recallDroppable();

Download now

Interface 1.2 146kb (source files, compressed files)
jQuery 1.1.2 19 kb

MediaSecure