Metal's drag and drop component.
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'
});
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'
});
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'
});
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
}
});
Rather than dragging the element itself, a clone can be created in it's place.
new Drag({
dragPlaceholder: Drag.Placeholder.CLONE,
sources: '.box'
});
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>
});
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
});
For more examples, check out the demos.
-
Install a recent release of NodeJS if you don't have it yet.
-
Install local dependencies:
npm install
- Run the tests:
npm test
- Build the code:
npm run build
- Open the demo at demos/index.html on your browser.
Check out the contributing guidelines for more information.