Drag and drop

Learn best through examples? Check out:

• Drag and drop example
• Sortable list
• Resizeable text area

AJS.dnd.current_root

When dragging begins this object holds the element that is moved.

AJS.dnd.current_handler

When dragging begins this object holds the element that drags. It has some extra information attached to it:

AJS.dnd.current_handler._kws:

The extra arguments that were passed to dragAble

AJS.dnd.current_handler._root:

The element that the handler moves.

AJS.dnd.dragAble(element, args)

Make element drag able. The element's style.position should be absolute.

args:

All args are optional.

• move_x:
  Enable horizontal move. Default true.
• move_y:
  Enable vertical move. Default true.
• scroll_on_overflow:
  Scroll the page on overflow. Default: true.
• on_start:
  A callback that is triggered when the drag is started.
  Signature of this function is on_start().
• on_drag:
  A callback that is triggered when a dragable is dragged.
  Signature of this function is on_drag(new_x, new_y).
• on_end:
  A callback that is triggered when the drag is stopped.
  Signature of this function is on_start().
• move_filter:
  This function can control the x and y coordinates.
  Signature of this function is move_filter(x, y) -> [x, y].

Example:

AJS.dnd.removeDragAble(element)

Remove drag ability from element.