README.md

metal-drag-drop

Metal's drag and drop component.

Use

Simple use case

This instance of Drag will allow any element with the box class to be dragged, but only when clicking a child element that has the handle class.

<div class="box">
  <div class="handle" tabindex="0"></div>
</div>
<div class="box">
  <div class="handle" tabindex="0"></div>
</div>

import {Drag} from 'metal-drag-drop';

new Drag({
  handles: '.handle',
  sources: '.box'
});

Locking axis

The drag elements can be locked to a specified axis, the following example would only allow the elements to move along the y axis.

new Drag({
  axis: 'y',
  sources: '.box'
});

The same can be done for the x axis.

new Drag({
  axis: 'x',
  sources: '.box'
});

Constraining

By setting the constrain element, the drag elements will not be allowed to leave the defined element's region.

new Drag({
  constrain: '#container', // Parent element of `.box` elements
  sources: '.box'
});

Steps

The steps config property defines how much the drag elements will move by at a time.

new Drag({
  sources: '.box',
  steps: {
    x: 50,
    y: 150
  }
});

Cloning drag element

Rather than dragging the element itself, a clone can be created in it's place.

new Drag({
  dragPlaceholder: Drag.Placeholder.CLONE,
  sources: '.box'
});

Drag Drop

The DragDrop class extends from the Drag class, but adds additional config properties for defining target drop areas and behavior.

<div class="box"></div>
<div class="target"></div>

import {DragDrop} from 'metal-drag-drop';

const dragDrop = new DragDrop({
  sources: '.box',
  targets: '.target'
});

dragDrop.on(DragDrop.Events.END, function(data, event) {
  event.preventDefault();

  console.log('Hit target:', data.target); // <div class="target"></div>
});

Events

The Drag class emits three events that can be listened to.

const drag = new Drag({
  sources: '.box'
});

drag.on(Drag.Events.DRAG, function(event) {
  // Logic
});

drag.on(Drag.Events.END, function(event) {
  // Logic
});

drag.on(Drag.Events.START, function(event) {
  // Logic
});

The DragDrop class adds two additional events related to drop targets.

const dragDrop = new DragDrop({
  sources: '.box',
  targets: '.target'
});

dragDrop.on(DragDrop.Events.TARGET_ENTER, function(event) {
  // Logic
});

dragDrop.on(DragDrop.Events.TARGET_LEAVE, function(event) {
  // Logic
});

More examples

For more examples, check out the demos.

Setup

1. Install a recent release of NodeJS if you don't have it yet.

2. Install local dependencies:

npm install

3. Run the tests:

npm test

4. Build the code:

npm run build

5. Open the demo at demos/index.html on your browser.

Contributing

Check out the contributing guidelines for more information.