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.
; 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.
axis: 'y' sources: '.box';
The same can be done for the x axis.
axis: 'x' sources: '.box';
Constraining
By setting the constrain
element, the drag elements will not be allowed to
leave the defined element's region.
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.
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.
dragPlaceholder: DragPlaceholderCLONE sources: '.box';
Drag Drop
The DragDrop
class extends from the Drag
class, but adds additional config
properties for defining target drop areas and behavior.
; const dragDrop = sources: '.box' targets: '.target'; dragDrop;
Events
The Drag
class emits three events that can be listened to.
const drag = sources: '.box'; drag; drag; drag;
The DragDrop
class adds two additional events related to drop targets.
const dragDrop = sources: '.box' targets: '.target'; dragDrop; dragDrop;
More examples
For more examples, check out the demos.
Setup
-
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.
Contributing
Check out the contributing guidelines for more information.