- Notifications
You must be signed in to change notification settings - Fork7
Metal's drag and drop component.
License
deprecate/metal-drag-drop
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Metal's drag and drop component.
This instance ofDrag will allow any element with thebox class to bedragged, but only when clicking a child element that has thehandle class.
<divclass="box"><divclass="handle"tabindex="0"></div></div><divclass="box"><divclass="handle"tabindex="0"></div></div>
import{Drag}from'metal-drag-drop';newDrag({handles:'.handle',sources:'.box'});
The drag elements can be locked to a specified axis, the following example wouldonly allow the elements to move along the y axis.
newDrag({axis:'y',sources:'.box'});
The same can be done for the x axis.
newDrag({axis:'x',sources:'.box'});
By setting theconstrain element, the drag elements will not be allowed toleave the defined element's region.
newDrag({constrain:'#container',// Parent element of `.box` elementssources:'.box'});
Thesteps config property defines how much the drag elements will move by at atime.
newDrag({sources:'.box',steps:{x:50,y:150}});
Rather than dragging the element itself, a clone can be created in it's place.
newDrag({dragPlaceholder:Drag.Placeholder.CLONE,sources:'.box'});
TheDragDrop class extends from theDrag class, but adds additional configproperties for defining target drop areas and behavior.
<divclass="box"></div><divclass="target"></div>
import{DragDrop}from'metal-drag-drop';constdragDrop=newDragDrop({sources:'.box',targets:'.target'});dragDrop.on(DragDrop.Events.END,function(data,event){event.preventDefault();console.log('Hit target:',data.target);// <div></div>});
TheDrag class emits three events that can be listened to.
constdrag=newDrag({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});
TheDragDrop class adds two additional events related to drop targets.
constdragDrop=newDragDrop({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 thedemos.
Install a recent release ofNodeJS if youdon'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 thecontributing guidelines for more information.
About
Metal's drag and drop component.