• Earn a $50 Amazon gift card for testing a new product from the makers of PBworks. Click here to apply.

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

View
 

Droppable

Page history last edited by Dave Stein 6 years, 9 months ago

 

type: interaction

release: N/A

status: in development

documentation: N/A

demo: http://view.jqueryui.com/interactions/demos/droppable/default.html

 

Note: This plugin is being rewritten for the 2.0 release. This documentation is about the rewrite, not the existing plugin.

 

 

Todos:

  • provide backCompat for all existing options for 2.0, except for addClasses
  • Figure a better name for "fit" and "intersect" for tolerance option 

 

 


 

1 - Description:

 

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

 


 

2 - Visual Design:

 

N/A

 

 


 

3 - Functional Specifications/Requirements:

 

Options

  • tolerance (string, default: "intersect")
    • intersect: half of the draggable element must overlap the droppable element horizontally and vertically
    • touch: the draggable element must overlap the droppable element by at least one pixel
    • pointer: the pointing device must overlap the droppable element 
    • fit: the draggable element is fully contained within the droppable element
  • accept ( string, Selector, Function, default "*" )
    • Controls which draggable elements are accepted by the droppable.
    •  Multiple types supported:
      •  Selector: A selector indicating which draggable elements are accepted.
      •  Function: A function that will be called for each draggable on the page (passed as the first argument to the function). The function must return true if the draggable should be accepted.
  •   greedy ( boolean, default false )
    • 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. 

 

 

Methods

  • just the inherited defaults 

 

Events

  • activate
  • create 
  • deactivate
  • over
  • out
  • drop

 


 

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:

 

Branch: https://github.com/jquery/jquery-ui/tree/interactions

 

Code: https://github.com/jquery/jquery-ui/blob/interactions/ui/jquery.ui.droppable.js

 

Demo: http://view.jqueryui.com/interactions/demos/droppable/default.html

 


 

6 - Open issues being discussed

 

  •  

 

Comments (1)

Scott González said

at 7:28 pm on Mar 14, 2012

Consider adding a drag event to droppable to make droppable-specific event handlers easier to work with. See https://forum.jquery.com/topic/droppable-dragover-support-26-2-2012

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