• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Whenever you search in PBworks, Dokkio Sidebar (from the makers of PBworks) will run the same search in your Drive, Dropbox, OneDrive, Gmail, and Slack. Now you can find what you're looking for wherever it lives. Try Dokkio Sidebar for free.



This version was saved 13 years, 10 months ago View current version     Page history
Saved by Paul Bakaus
on January 29, 2009 at 7:09:26 am


type: interaction

release: 1.0

priority: -

status: complete

documentation: http://docs.jquery.com/UI/Droppable

demo: http://ui.jquery.com/demos/droppable



1 - Description:


The droppable plugin attaches a behaviour to a generic element and therefore makes it a target for a Draggable or Sortable.



2 - Visual Design:






3 - Functional Specifications/Requirements:



  • options:
    • accept (string[selector] or function (returning boolean), default: '*')
    • activeClass (string, default: false)
    • greedy (boolean, default: false)
    • hoverClass (string, default: false)
    • scope (string, default: 'default')
    • tolerance ('intersect', 'pointer', 'fit', 'touch', default: 'intersect')
  • methods:
    • (none)
  • callbacks:
    • activate (event: mousedown)
    • deactivate (event: mouseup)
    • over (event: mousemove)
    • out (event: mousemove)
    • drop (event: mouseup)
  • 'ui' object:
    • draggable (object[jQuery])
    • helper [object[jQuery]]
    • position [hash with top/left integers]
    • offset [hash with top/left integers]



  • A droppable is a drop target for a draggable.
  • Each droppable determines the draggables for which it is an acceptable target. This is done by the 'accept' option.
  • If the 'accept' option is a selector, any draggable is compared to that selector to determine whether or not it's an acceptable target.
  • If the 'accept' option is a function, the function is executed with a jQuery object (containing the  draggable DOMElement) passed as the first argument. The context ('this') of the function is the droppable DOMElement (not a jQuery object). The function should return a boolean. It should return true if this is an acceptable target for the given draggable.
  • The droppable implementation comes with a global drag & drop manager called $.ui.ddmanager. It tracks the current draggable, has a list of all droppables at all times and its 'drag' function is called during dragging of the draggable (a 'drop' function on mouseup). It then forwards to the actual widget functions of the current intersecting droppable.
  • activate callback: triggers at the dragstart of an accepted draggable.
  • deactivate callback: triggers at the dragstop of an accepted draggable (whether the draggable is dropped 'over' the droppable or not)
  • over callback: triggers when an accepted draggable is dragged across (in) the 'tolerance' of the droppable.
  • out callback: triggers when an accepted draggable is dragged across (out) the 'tolerance' of the droppable.
  • drop callback: triggers at the dragstop of an accepted draggable when that draggable is 'over' (see tolerance) the droppable.



4 - Markup & Style:


     4.1 Initial markup examples


     (not applicable)


     4.2 Recommended transformed HTML markup


     (not applicable)


     4.3 Accessibility recommendation


    (Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices) 


     4.4 CSS & Theme


    (Not applicable) 



5 - Latest version of plugin:





6 - Open issues being discussed


(Use this area to place things that we're hashing out like featuresand options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)






Comments (0)

You don't have permission to comment on this page.