The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which draggables each will accept.
Dependencies
- UI Core
- Widget Factory
- Mouse Interaction
"*"
Multiple types supported:
- Selector: A selector indicating which draggable elements are accepted.
- Function: A function that will be called for each draggable on the page (passed as the first argument to the function). The function must return
true
if the draggable should be accepted.
Code examples:
Initialize the droppable with the accept
option specified:
$( ".selector" ).droppable({ accept: ".special" });
Get or set the accept
option, after initialization:
// Getter var accept = $( ".selector" ).droppable( "option", "accept" ); // Setter $( ".selector" ).droppable( "option", "accept", ".special" );
false
Code examples:
Initialize the droppable with the activeClass
option specified:
$( ".selector" ).droppable({ activeClass: "ui-state-highlight" });
Get or set the activeClass
option, after initialization:
// Getter var activeClass = $( ".selector" ).droppable( "option", "activeClass" ); // Setter $( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" );
true
false
, will prevent the ui-droppable
class from being added. This may be desired as a performance optimization when calling .droppable()
init on hundreds of elements.Code examples:
Initialize the droppable with the addClasses
option specified:
$( ".selector" ).droppable({ addClasses: false });
Get or set the addClasses
option, after initialization:
// Getter var addClasses = $( ".selector" ).droppable( "option", "addClasses" ); // Setter $( ".selector" ).droppable( "option", "addClasses", false );
false
true
.Code examples:
Initialize the droppable with the disabled
option specified:
$( ".selector" ).droppable({ disabled: true });
Get or set the disabled
option, after initialization:
// Getter var disabled = $( ".selector" ).droppable( "option", "disabled" ); // Setter $( ".selector" ).droppable( "option", "disabled", true );
false
true
, any parent droppables will not receive the element. The drop
event will still bubble normally, but the event.target
can be checked to see which droppable received the draggable element.Code examples:
Initialize the droppable with the greedy
option specified:
$( ".selector" ).droppable({ greedy: true });
Get or set the greedy
option, after initialization:
// Getter var greedy = $( ".selector" ).droppable( "option", "greedy" ); // Setter $( ".selector" ).droppable( "option", "greedy", true );
false
Code examples:
Initialize the droppable with the hoverClass
option specified:
$( ".selector" ).droppable({ hoverClass: "drop-hover" });
Get or set the hoverClass
option, after initialization:
// Getter var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" ); // Setter $( ".selector" ).droppable( "option", "hoverClass", "drop-hover" );
"default"
accept
option. A draggable with the same scope value as a droppable will be accepted.Code examples:
Initialize the droppable with the scope
option specified:
$( ".selector" ).droppable({ scope: "tasks" });
Get or set the scope
option, after initialization:
// Getter var scope = $( ".selector" ).droppable( "option", "scope" ); // Setter $( ".selector" ).droppable( "option", "scope", "tasks" );
"intersect"
-
"fit"
: Draggable overlaps the droppable entirely. -
"intersect"
: Draggable overlaps the droppable at least 50% in both directions. -
"pointer"
: Mouse pointer overlaps the droppable. -
"touch"
: Draggable overlaps the droppable any amount.
Code examples:
Initialize the droppable with the tolerance
option specified:
$( ".selector" ).droppable({ tolerance: "fit" });
Get or set the tolerance
option, after initialization:
// Getter var tolerance = $( ".selector" ).droppable( "option", "tolerance" ); // Setter $( ".selector" ).droppable( "option", "tolerance", "fit" );
- This method does not accept any arguments.
Invoke the destroy method:
$( ".selector" ).droppable( "destroy" );
- This method does not accept any arguments.
Invoke the disable method:
$( ".selector" ).droppable( "disable" );
- This method does not accept any arguments.
Invoke the enable method:
$( ".selector" ).droppable( "enable" );
Retrieves the droppable's instance object. If the element does not have an associated instance, undefined
is returned.
Unlike other widget methods, instance()
is safe to call on any element after the droppable plugin has loaded.
- This method does not accept any arguments.
Invoke the instance method:
$( ".selector" ).droppable( "instance" );
Gets the value currently associated with the specified optionName
.
Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar"
would get the value of the bar
property on the foo
option.
- optionNameType: StringThe name of the option to get.
Invoke the method:
var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
- This signature does not accept any arguments.
Invoke the method:
var options = $( ".selector" ).droppable( "option" );
Sets the value of the droppable option associated with the specified optionName
.
Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName
. For example, "foo.bar"
would update only the bar
property of the foo
option.
- optionNameType: StringThe name of the option to set.
- valueType: ObjectA value to set for the option.
Invoke the method:
$( ".selector" ).droppable( "option", "disabled", true );
- optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
$( ".selector" ).droppable( "option", { disabled: true } );
jQuery
object containing the droppable element. - This method does not accept any arguments.
Invoke the widget method:
var widget = $( ".selector" ).droppable( "widget" );
dropactivate
- eventType: Event
- uiType: Object
- draggableType: jQueryA jQuery object representing the draggable element.
- helperType: jQueryA jQuery object representing the helper that is being dragged.
- positionType: ObjectCurrent CSS position of the draggable helper as
{ top, left }
object. - offsetType: ObjectCurrent offset position of the draggable helper as
{ top, left }
object.
-
Initialize the droppable with the activate callback specified:
$( ".selector" ).droppable({ activate: function( event, ui ) {} });
Bind an event listener to the dropactivate event:
$( ".selector" ).on( "dropactivate", function( event, ui ) {} );
dropcreate
Note: The ui
object is empty but included for consistency with other events.
Initialize the droppable with the create callback specified:
$( ".selector" ).droppable({ create: function( event, ui ) {} });
Bind an event listener to the dropcreate event:
$( ".selector" ).on( "dropcreate", function( event, ui ) {} );
dropdeactivate
- eventType: Event
- uiType: Object
- draggableType: jQueryA jQuery object representing the draggable element.
- helperType: jQueryA jQuery object representing the helper that is being dragged.
- positionType: ObjectCurrent CSS position of the draggable helper as
{ top, left }
object. - offsetType: ObjectCurrent offset position of the draggable helper as
{ top, left }
object.
-
Initialize the droppable with the deactivate callback specified:
$( ".selector" ).droppable({ deactivate: function( event, ui ) {} });
Bind an event listener to the dropdeactivate event:
$( ".selector" ).on( "dropdeactivate", function( event, ui ) {} );
drop
tolerance
option).- eventType: Event
- uiType: Object
- draggableType: jQueryA jQuery object representing the draggable element.
- helperType: jQueryA jQuery object representing the helper that is being dragged.
- positionType: ObjectCurrent CSS position of the draggable helper as
{ top, left }
object. - offsetType: ObjectCurrent offset position of the draggable helper as
{ top, left }
object.
-
Initialize the droppable with the drop callback specified:
$( ".selector" ).droppable({ drop: function( event, ui ) {} });
Bind an event listener to the drop event:
$( ".selector" ).on( "drop", function( event, ui ) {} );
dropout
tolerance
option).Note: The ui
object is empty but included for consistency with other events.
Initialize the droppable with the out callback specified:
$( ".selector" ).droppable({ out: function( event, ui ) {} });
Bind an event listener to the dropout event:
$( ".selector" ).on( "dropout", function( event, ui ) {} );
dropover
tolerance
option).- eventType: Event
- uiType: Object
- draggableType: jQueryA jQuery object representing the draggable element.
- helperType: jQueryA jQuery object representing the helper that is being dragged.
- positionType: ObjectCurrent CSS position of the draggable helper as
{ top, left }
object. - offsetType: ObjectCurrent offset position of the draggable helper as
{ top, left }
object.
-
Initialize the droppable with the over callback specified:
$( ".selector" ).droppable({ over: function( event, ui ) {} });
Bind an event listener to the dropover event:
$( ".selector" ).on( "dropover", function( event, ui ) {} );
A pair of draggable and droppable elements.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>droppable demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <style> #draggable { width: 100px; height: 100px; background: #ccc; } #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 125px; background: #999; color: #fff; padding: 10px; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> </head> <body> <div id="droppable">Drop here</div> <div id="draggable">Drag me</div> <script> $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function() { alert( "dropped" ); } }); </script> </body> </html>
Please login to continue.