# vim: sw=3 ts=3 ft=org

#+TITLE: Droppable Element Element
#+STYLE: <LINK href='../stylesheet.css' rel='stylesheet' type='text/css' />
#+AUTHOR: Rusty Klophaus (@rustyio)
#+OPTIONS:   H:2 num:1 toc:1 \n:nil @:t ::t |:t ^:t -:t f:t *:t <:t
#+EMAIL: 
#+TEXT: [[file:../index.org][Getting Started]] | [[file:../api.org][API]] | [[file:../elements.org][*Elements*]] | [[file:../actions.org][Actions]] | [[file:../validators.org][Validators]] | [[file:../handlers.org][Handlers]] | [[file:../config.org][Configuration Options]] | [[file:../about.org][About]]

* Droppable Element

  The droppable element allows you to make a block of Nitrogen elements a drop target for draggable elements.

  Combine the draggable element with the droppable element to allow drag and drop behavior.

** Usage

#+BEGIN_SRC erlang
   #droppable { tag=drop1, accept_class=accept, hover_class=hover, body=[
     #span { text="This is a droppable block." }
   ]}
#+END_SRC

** Attributes

   + tag - (/Erlang term/) :: The drag term to pass into the drop\_event/2 event.

   + body - (/Nitrogen elements/) :: The elements that will be droppable.

   + accept\_groups - (/list of atoms (defaults to 'all')/) :: The drag groups that will be accepted by this drop target

   + active\_class - (/atom or string (defaults to 'active')/) :: This CSS class will be applied to the element when the user drags a draggable element.

   + hover\_class - (/atom or string (defaults to 'hover')/) :: This CSS class will be applied to the element when the user hovers with a draggable element.

** Events

*** drop_event(DragTag, DropTag)

   Called when the user drops an element. DragTag is the tag associated with the draggable element. DropTag is the tag associated with the droppable element.

** See Also

   + [[./draggable.html][draggable element]]
