Categories

.droppable()

Categories: UI

.droppable( [ options ] )

Plugin: jQuery.ui.droppable

Description: Apply the Droppable widget for each element in the set of matched elements

  • .droppable( [ options ] )

    version added: 1.0

    options   A map of additional options pass to the widget.

The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.

All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

  • ui.draggable - current draggable element, a jQuery object.
  • ui.helper - current draggable helper, a jQuery object
  • ui.position - current position of the draggable helper { top: , left: }
  • ui.offset - current absolute position of the draggable helper { top: , left: }
  • disabled

    Disables (true) or enables (false) the droppable. Can be set when initialising (first creating) the droppable.

    Default: false

  • accept

    All draggables that match the selector will be accepted. If a function is specified, the function will be called for each draggable on the page (passed as the first argument to the function), to provide a custom filter. The function should return true if the draggable should be accepted.

    Default: '*'

  • activeClass

    If specified, the class will be added to the droppable while an acceptable draggable is being dragged.

    Default: false

  • addClasses

    If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on many hundreds of elements.

    Default: true

  • greedy

    If true, will prevent event propagation on nested droppables.

    Default: false

  • hoverClass

    If specified, the class will be added to the droppable while an acceptable draggable is being hovered.

    Default: false

  • scope

    Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted.

    Default: 'default'

  • tolerance

    Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'.

    Default: 'intersect'

  • create

    This event is triggered when droppable is created.

  • activate

    This event is triggered any time an accepted draggable starts dragging. This can be useful if you want to make the droppable 'light up' when it can be dropped on.

  • deactivate

    This event is triggered any time an accepted draggable stops dragging.

  • over

    This event is triggered as an accepted draggable is dragged 'over' (within the tolerance of) this droppable.

  • out

    This event is triggered when an accepted draggable is dragged out (within the tolerance of) this droppable.

  • drop

    This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable.

  • destroy

    • .droppable( "destroy" )

      version added: 1.0

    Remove the droppable functionality completely. This will return the element back to its pre-init state.

  • disable

    • .droppable( "disable" )

      version added: 1.0

    Disable the droppable.

  • enable

    • .droppable( "enable" )

      version added: 1.0

    Enable the droppable.

  • option

    • .droppable( "option" , optionName , [value] )

      version added: 1.0

    Get or set any droppable option. If no value is specified, will act as a getter.

  • option

    • .droppable( "option" , options )

      version added: 1.0

    Set multiple droppable options at once by providing an options object.

  • widget

    • .droppable( "widget" )

      version added: 1.0

    Returns the .ui-droppable element.