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

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!



This version was saved 15 years, 4 months ago View current version     Page history
Saved by Richard D. Worth
on February 7, 2009 at 3:01:15 pm


type: interaction

release: 1.0

priority: -

status: complete

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

demo: http://jqueryui.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 (Selector, Function | default: '*')
      • Function(draggable)
        • arg1 type: jQuery object
        • return type: Boolean
    • activeClass (String | default: false)
    • addClasses (Boolean | default: true }
    • greedy (Boolean | default: false)
    • hoverClass (String | default: false)
    • scope (String | default: 'default')
    • tolerance (Sring | default: 'intersect')
      • Possible string values: 'fit', 'intersect', 'pointer', 'touch'
  • events:
    • activate (event: mousedown)
    • deactivate (event: mouseup)
    • over (event: mousemove)
    • out (event: mousemove)
    • drop (event: mouseup)
  • methods:
    • (none)
  • '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.
  • The callbacks should always report the absolute offset position as well as the relative position (relative to the next offset parent).
  • the droppable must feature a number of tolerance modes for checking at what point the draggable intersects with the droppable. Currently, those are the supported modes: tolerance: 'fit' -> draggable has to be complete inside the droppable, 'intersect' -> more than 50% of the draggable have to overlap with the droppable, 'pointer' -> the mouse pointer must be over the droppable, 'touch' -> the draggable has to intersect the droppable by more than 0%
  • in situations where droppables are nested, the usual expected behaviour is to fire the drop event on the inner and outer droppables when dropped on the inner (since both intersect). In order to make add usefulness, there is a greedy option that if set to true, makes the event not propagate to the outer droppable and instead only fires the drop on the inner 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.