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();