Drag and Drop Plugin

Back to plugins | Download plugin

The Drag and Drop plugin adds 3 methods to the API wrapper which allow you to drag, resize and drop elements, the nano.dragdrop object containing the 4 internal methods for selecting, dragging, resizing, and dropping elements, and also 3 new parameters to define movement limits, drag area and resize scaling when creating new DOM nodes.

Dragging and Resizing

The drag(), resize() and drop() methods provide the basic actions for creating the drag/resize experience. All 3 methods accept the current event object as the only argument. To make an element draggable, simple call the drag() method in the onmousedown event of the element, and the drop() method in the onmouseup event.

  nano('draggable').evt({
      mousedown: function(e) {
          nano(this).drag(e);
      },
      mouseup: function(e) {
          nano(this).drop(e);
      }
  });

The event callbacks recieve the current event object as their first argument. To pass this to the drag() and drop() simply pass the current event object.

To make an element resizable simply replace the drag() method with resize().

  nano('resizable').evt({
      mousedown: function(e) {
          nano(this).resize(e);
      },
      mouseup: function(e) {
          nano(this).drop(e);
      }
  });

You can also define if an element is draggable or resizable when creating a new DOM node:

  var box = new nano({
      parent: nano.body(),
      tag: 'div',
      css: 'my-drag-box',
      text: 'Drag Me!',
      evt: {
          mousedown: function(e) {
              nano(this).drag(e);
          },
          mouseup: function(e) {
              nano(this).drop(e);
          }
      }
  });

Select Element

Before dragging or resizing an element you must select and prepare it. The nano.dragdrop.select() method configures an element for dragging or resizing and recieves these arguments in the following order:

node [object] (DOM node to use)
type [string] (defines the action, can be "drag" or "resize")
limit [string] (limits the axis of movement, can be "vertical", "horizontal" or "none")
area [object] (defines the area of movement, for example, {x: 50, y: 20, w: 500, h: 300})
scale [object] (defines the size limits, for example, {min: {w: 100, h: 80}, max: {w: 300, h: 220}})
evt [object] (current event object)

  var node = nano('draggable');

  nano.dragdrop.select(node, 'drag', 'vertical', {x: node.parent().x(), w: node.parent().w()}, null, e);

This would be an example for a vertical slider, limited to the vertical axis and the area of its parent.

Drag Element

The nano.dragdrop.drag() method is used internally by the plugin to move the element according to the mouse movement.

Resize Element

The nano.dragdrop.resize() method is used internally by the plugin to resize the element according to the mouse movement.

Drop Element

The nano.dragdrop.drop() method ends the current drag or resize action and clears the element of all attributes added during the process. The method only accepts 1 argument, which is the DOM node:

node [object] (DOM node used)

  nano.dragdrop.drop(nano('draggable'));