Draggable Element Element

Home | Getting Started | API | Elements | Actions | Validators | Handlers | Configuration Options | Advanced Guides | Troubleshooting | About

Table of Contents

1 Draggable Element - #draggable {}

The draggable element allows you to make a block of Nitrogen elements draggable by the user.

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


#draggable { tag=drag1, clone=true, revert=false, handle=grip, body=[
  #image { class=grip, url="/images/handle.png" },
  #span { text="This is a draggable block." }


tag - (Erlang term)
The drag term to pass into the drop_event/2 event.
body - (Nitrogen elements)
The elements that will be draggable.
group - (atom or string)
The name of this drag group, for use in the droppable element's accept_groups attribute.
handle - (atom or string)
The class of the handle element on the page. Then handle will then be the part of the element that will be clicked and dragged around.
clone - (boolean)
If true, the element will be cloned in the DOM while dragged. If false, the element will be detached from the DOM while dragging.
revert - (boolean)
If true, the element will be reverted back to its original position if the drop fails.
scroll - (boolean)
If true, the window or container will scroll when the item is dragged to the edge.
distance - (integer)
Set to the minimum number of pixels the cursor must move with the mouse down before the drag actually begins. (default: 3)
container - (atom or string)
How you wish to contain the draggable element. Common containers are window, document, or parent. Otherwise, it can be specified in the form of a jquery selector. See the documentation on the "Containment" option for the jquery Draggable element for more information.
zindex - (integer)
The z-index of the element to be dragged around the page.
options - (proplist)
A list of additional options to be passed to the draggable function. (See the jQuery Draggable Documentation below for the complete list of options).

Date: 2014-11-12 19:51:09 CST

Author: Rusty Klophaus (@rustyio)

Org version 7.8.02 with Emacs version 23

Validate XHTML 1.0


Note:To specify code blocks, just use the generic code block syntax:
<pre><code>your code here</code></pre>

comments powered by Disqus