npm i draggerjs
import Dragger from "draggerjs"
we are getting started using draggerjs.
<div className="drag-container" id="drag-getting-started"><div className="drag-around n-border-color"><div className="draggable-box center n-flat"><h1>Drag Me</h1></div></div></div>
Drag Me
you can easily apply autoscroll in the draggerjs just add autoscroll: true in the options.
<div className="drag-container drag-long-ground" id="drag-autoscroll"><div className="drag-around n-border-color"><div className="draggable-box center n-flat"><h1>Drag Me</h1></div></div></div>
Drag Me
you can create with your own drag mechanics.
<div className="drag-drawer" id="drag-raw-drag"><div className="drag-drawer-content n-no-shadow n-engrave"><nav className="n-nav n-nav-flat n-nav-column"><a className="n-nav-link" href="#">link-1</a><a className="n-nav-link" href="#">link-2</a><a className="n-nav-link" href="#">link-3</a></nav></div></div>
you can use droppable as well.
<div className="drag-container" id="drag-droppable"><div className="droppable-area n-no-shadow n-border-color"><div className="draggable-box n-no-shadow n-flat"><h1>1</h1></div><div className="draggable-box n-no-shadow n-flat"><h1>2</h1></div></div><div className="droppable-area n-no-shadow n-border-color"></div></div>
1
2
When using droppable make sure to add [hidden] { display: none !important; } in your stylesheet. due to some changes in browsers which hidden property gets overridden.
you can clone as well.
<div id="drag-cloning" className="drag-container"><div className="droppable-area n-no-shadow n-border-color"><div className="draggable-box n-no-shadow n-flat" id="draggable-1"><h1>1</h1></div><div className="draggable-box n-no-shadow n-flat" id="draggable-2"><h1>2</h1></div></div><div className="droppable-area n-no-shadow n-border-color"><div className="draggable-box n-no-shadow n-flat" id="draggable-3"><h1>3</h1></div><div className="draggable-box n-no-shadow n-flat" id="draggable-4"><h1>4</h1></div></div></div>
1
2
3
4
When using droppable make sure to add [hidden] { display: none !important; } in your stylesheet. due to some changes in browsers which hidden property gets overridden.
you can do switching as well.
<ul className="switching-area"><li className="switching-box n-no-shadow n-flat-low" data-index="1"><h5>Apple</h5></li><li className="switching-box n-no-shadow n-flat-low" data-index="2"><h5>Peach</h5></li><li className="switching-box n-no-shadow n-flat-low" data-index="3"><h5>Orange</h5></li><li className="switching-box n-no-shadow n-flat-low" data-index="4"><h5>Grapes</h5></li><li className="switching-box n-no-shadow n-flat-low" data-index="5"><h5>Banana</h5></li></ul>
Apple
Peach
Orange
Grapes
Banana
When using droppable make sure to add [hidden] { display: none !important; } in your stylesheet. due to some changes in browsers which hidden property gets overridden.
API
Argument Argument | Type Type | Default Default | Description Description |
---|---|---|---|
new Dragger( | |||
container, | string | element | node | - | it is the container or the playground of the Dragger. |
options | object | - | It is the options of the Dragger. |
) |
Method Method | Return Return | Default Default | Description Description |
---|---|---|---|
Instance.on | void | - | it is the method to add Dragger event listener |
Instance.off | void | - | it is the method to remove Dragger event listener |
Instance.destroy | void | - | it is use to destroy and kill the Dragger. |
Property Property | Type Type | Default Default | Description Description |
---|---|---|---|
type | string | - | it is event type. |
preventDefault | method | - | it is use to prevent default. |
stopPropagation | method | - | it is use to stop the propagation. |
originalEvent | object | - | it is the original event |
clientX | number | - | it is the x position of the cursor in window |
clientY | number | - | it is the y position of the cursor in window |
startX | number | - | it is the start x position of the cursor in container. |
startY | number | - | it is the start y position of the cursor in container. |
moveX | number | - | it is the current x position of the cursor in container. |
moveY | number | - | it is the current y position of the cursor in container. |
endX | number | - | it is the end x position of the cursor in container. |
endY | number | - | it is the end y position of the cursor in container. |
isDraggableElement | boolean | - | it indicates if the targeted element is draggable. |
target | element | node | - | it is the element which is targeted. |
container | element | node | - | it is the element container. |
droppable (dragover, dragenter, drop) | element | node | - | it is the element inside droppable container where the target is landed. it might be the children of the droppable container. |
currentDroppable (dragover, dragenter, dragexit, drop) | element | node | - | it is the droppable container element which you want to drop (dragenter), you fail to drop (dragexit) or you dropped (drop). |