YouTip

## Category (#) ## Usage **Description:** Creates a target for draggable widgets. **Added in:** 1.0 **Dependencies:** **Note:** The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on after a drag). You can specify which draggables are accepted on an individual basis. ### Quick Navigation | Options | Methods | Events | | --- | --- | --- | | (#) (#) (#) (#) (#) (#) (#) (#) | (#) (#) (#) (#) (#) | (#) (#) (#) (#) (#) (#) | | Option | Type | Description | Default | | --- | --- | --- | --- | | accept | Selector or Function() | Controls which draggable elements are accepted by the droppable. **Supports multiple types:** * **Selector**: A selector specifying which draggable elements are accepted by the droppable. * **Function()**: A function that will be called for each draggable on the page (passed as the first argument to the function). If the draggable is accepted, the function must return `true`. **Code examples:** Initialize a droppable with the specified `accept` option: $( ".selector" ).droppable({ accept: ".special" }); After initialization, get or set the `accept` option: // gettervar accept = $( ".selector" ).droppable( "option", "accept" ); // setter $( ".selector" ).droppable( "option", "accept", ".special" ); | "*" | | activeClass | String | If specified, this class will be added to the droppable when an accepted draggable is being dragged. **Code examples:** Initialize a droppable with the specified `activeClass` option: $( ".selector" ).droppable({ activeClass: "ui-state-highlight" }); After initialization, get or set the `activeClass` option: // gettervar activeClass = $( ".selector" ).droppable( "option", "activeClass" ); // setter $( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" ); | false | | addClasses | Boolean | If set to `false`, will prevent the `ui-droppable` class from being added. This can help with performance when calling `.droppable()` on hundreds of elements. **Code examples:** Initialize a droppable with the specified `addClasses` option: $( ".selector" ).droppable({ addClasses: false }); After initialization, get or set the `addClasses` option: // gettervar addClasses = $( ".selector" ).droppable( "option", "addClasses" ); // setter $( ".selector" ).droppable( "option", "addClasses", false ); | true | | disabled | Boolean | If set to `true`, disables the droppable. **Code examples:** Initialize a droppable with the specified `disabled` option: $( ".selector" ).droppable({ disabled: true }); After initialization, get or set the `disabled` option: // gettervar disabled = $( ".selector" ).droppable( "option", "disabled" ); // setter $( ".selector" ).droppable( "option", "disabled", true ); | false | | greedy | Boolean | By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to `true`, any parent droppables will not receive the element. The `drop` event will still fire normally, but you can check `event.target` to see which droppable received the draggable element. **Code examples:** Initialize a droppable with the specified `greedy` option: $( ".selector" ).droppable({ greedy: true }); After initialization, get or set the `greedy` option: // gettervar greedy = $( ".selector" ).droppable( "option", "greedy" ); // setter $( ".selector" ).droppable( "option", "greedy", true ); | false | | hoverClass | String | If specified, this class will be added to the droppable when an accepted draggable is hovered over it. **Code examples:** Initialize a droppable with the specified `hoverClass` option: $( ".selector" ).droppable({ hoverClass: "drop-hover" }); After initialization, get or set the `hoverClass` option: // gettervar hoverClass = $( ".selector" ).droppable( "option", "hoverClass" ); // setter $( ".selector" ).droppable( "option", "hoverClass", "drop-hover" ); | false | | scope | String | Used to group draggable and droppable items, in addition to the droppable's `accept` option. A draggable with the same `scope` value as a droppable will be accepted by that droppable. **Code examples:** Initialize a droppable with the specified `scope` option: $( ".selector" ).droppable({ scope: "tasks" }); After initialization, get or set the `scope` option: // gettervar scope = $( ".selector" ).droppable( "option", "scope" ); // setter $( ".selector" ).droppable( "option", "scope", "tasks" ); | "default" | | tolerance | String | Specifies which mode to use for testing whether a draggable is hovering over a droppable. Possible values: * `"fit"`: Draggable overlaps the droppable entirely. * `"intersect"`: Draggable overlaps the droppable by at least 50% in both directions. * `"pointer"`: Mouse pointer overlaps the droppable. * `"touch"`: Draggable overlaps the droppable at any amount. **Code examples:** Initialize a droppable with the specified `tolerance` option: $( ".selector" ).droppable({ tolerance: "fit" }); After initialization, get or set the `tolerance` option: // gettervar tolerance = $( ".selector" ).droppable( "option", "tolerance" ); // setter $( ".selector" ).droppable( "option", "tolerance", "fit" ); | "intersect" | | Method | Returns | Description | | --- | --- | --- | | destroy() | jQuery (plugin only) | Completely removes the droppable functionality. This will return the element back to its pre-init state. * This method does not accept any arguments. **Code examples:** Invoke the destroy method: $( ".selector" ).droppable( "destroy" ); | | disable() | jQuery (plugin only) | Disables the droppable. * This method does not accept any arguments. **Code examples:** Invoke the disable method: $( ".selector" ).droppable( "disable" ); | | enable() | jQuery (plugin only) | Enables the droppable. * This method does not accept any arguments. **Code examples:** Invoke the enable method: $( ".selector" ).droppable( "enable" ); | | option( optionName ) | Object | Gets the value currently associated with the specified `optionName`. * **optionName** Type: String Description: The name of the option to get. **Code examples:** Invoke the method: var isDisabled = $( ".selector" ).droppable( "option", "disabled" ); | | option() | PlainObject | Gets an object containing key/value pairs representing the current droppable options hash. * This method does not accept any arguments. **Code examples:** Invoke the method: var options = $( ".selector" ).droppable( "option" ); | | option( optionName, value ) | jQuery (plugin only) | Sets the value of the droppable option associated with the specified `optionName`. * **optionName** Type: String Description: The name of the option to set. * **value** Type: Object Description: The value to set for the option. **Code examples:** Invoke the method: $( ".selector" ).droppable( "option", "disabled", true ); | | option( options ) | jQuery (plugin only) | Sets one or more options for the droppable. * **options** Type: Object Description: A map of option-value pairs to set. **Code examples:** Invoke the method: $( ".selector" ).droppable( "option", { disabled: true } ); | | widget() | jQuery | Returns a `jQuery` object containing the droppable element. * This method does not accept any arguments. **Code examples:** Invoke the widget method: var widget = $( ".selector" ).droppable( "widget" ); | | Event | Type | Description | | --- | --- | --- | | activate( event, ui ) | dropactivate | Triggered when an accepted draggable starts dragging. This option is useful if you want the droppable to "light up" when it can be dropped on. * **event** Type: Event * **ui** Type: Object * **draggable** Type: jQuery Description: jQuery object representing the draggable element. * **helper** Type: jQuery Description: jQuery object representing the dragged helper. * **position** Type: Object Description: The current CSS position of the draggable helper, e.g. `{ top, left }` object. * **offset** Type: Object Description: The current offset position of the draggable helper, e.g. `{ top, left }` object. **Code examples:** Initialize a droppable with the specified activate callback: $( ".selector" ).droppable({ activate: function( event, ui ) {}}); Bind an event listener to the dropactivate event: $( ".selector" ).on( "dropactivate", function( event, ui ) {} ); | | create( event, ui ) | dropcreate | Triggered when the droppable is created. * **event** Type: Event * **ui** Type: Object Note: The `ui` object is empty, it is included here for consistency with other events. **Code examples:** Initialize a droppable with the specified create callback: $( ".selector" ).droppable({ create: function( event, ui ) {}}); Bind an event listener to the dropcreate event: $( ".selector" ).on( "dropcreate", function( event, ui ) {} ); | | deactivate( event, ui ) | dropdeactivate | Triggered when an accepted draggable stops dragging. * **event** Type: Event * **ui** Type: Object * **draggable** Type: jQuery Description: jQuery object representing the draggable element. * **helper** Type: jQuery Description: jQuery object representing the dragged helper. * **position** Type: Object Description: The current CSS position of the draggable helper, e.g. `{ top, left }` object. * **offset** Type: Object Description: The current offset position of the draggable helper, e.g. `{ top, left }` object. **Code examples:** Initialize a droppable with the specified deactivate callback: $( ".selector" ).droppable({ deactivate: function( event, ui ) {}}); Bind an event listener to the dropdeactivate event: $( ".selector" ).on( "dropdeactivate", function( event, ui ) {} ); | | drop( event, ui ) | drop | Triggered when an accepted draggable is dropped on the droppable (based on the `tolerance` option). * **event** Type: Event * **ui** Type: Object * **draggable** Type: jQuery Description: jQuery object representing the draggable element. * **helper** Type: jQuery Description: jQuery object representing the dragged helper. * **position** Type: Object Description: The current CSS position of the draggable helper, e.g. `{ top, left }` object. * **offset** Type: Object Description: The current offset position of the draggable helper, e.g. `{ top, left }` object. **Code examples:** Initialize a droppable with the specified drop callback: $( ".selector" ).droppable({ drop: function( event, ui ) {}}); Bind an event listener to the drop event: $( ".selector" ).on( "drop", function( event, ui ) {} ); | | out( event, ui ) | dropout | Triggered when a draggable is dragged out of the droppable (based on the `tolerance` option). * **event** Type: Event * **ui** Type: Object Note: The `ui` object is empty, it is included here for consistency with other events. **Code examples:** Initialize a droppable with the specified out callback: $( ".selector" ).droppable({ out: function( event, ui ) {}}); Bind an event listener to the dropout event: $( ".selector" ).on( "dropout", function( event, ui ) {} ); | | over( event, ui ) | dropover | Triggered when an accepted draggable is dragged over the droppable (based on the `tolerance` option). * **event** Type: Event * **ui** Type: Object * **draggable** Type: jQuery Description: jQuery object representing the draggable element. * **helper** Type: jQuery Description: jQuery object representing the dragged helper. * **position** Type: Object Description: The current CSS position of the draggable helper, e.g. `{ top, left }` object. * **offset** Type: Object Description: The current offset position of the draggable helper, e.g. `{ top, left }` object. **Code examples:** Initialize a droppable with the specified over callback: $( ".selector" ).droppable({ over: function( event, ui ) {}}); Bind an event listener to the dropover event: $( ".selector" ).on( "dropover", function( event, ui ) {} ); | ## Example A pair of draggable and droppable elements. #draggable { width: 100px; height: 100px; background: #ccc; } #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 125px; background: #999; color: #fff; padding: 10px; } $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function() { alert( "dropped" ); }});