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

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.

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

See Also

• Droppable Element

• Drag and Drop Demo

• jQuery Draggable Documentation