• 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 Paul Bakaus
on January 20, 2009 at 8:10:39 am


type: interaction

release: 1.0

priority: -

status: complete

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

demo: http://ui.jquery.com/demos/#ui.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]
    • absolutePosition [hash with top/left integers]



  • 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 when the draggable is picked up and the 'accept' value validated the draggable as possible drop target.
  • deactivate callback: triggers when the previously validated draggable is dropped again ( regardless if over the droppable or not)
  • over callback: triggers when the current dragged draggable intersects with the droppable
  • out callback: triggers when the previously with a droppable intersecting draggable is moving out of the intersection again
  • drop callback: triggers when the draggable is being dropped during the intersection of a valid drop target



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.