Draggable Element Element

Home | Getting Started | API | Elements | Actions | Validators | Handlers | Configuration Options | Plugins | Mobile | 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.

Usage

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

Attributes

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.
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.

Date: 2013-10-03 13:41:50 CDT

Author: Rusty Klophaus (@rustyio)

Org version 7.8.02 with Emacs version 23

Validate XHTML 1.0

Comments

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


comments powered by Disqus