DRAGSTUFF is a lightweight and versatile JavaScript library for implementing drag functionality in your web applications. With DRAGSTUFF, you can easily integrate dragging capabilities into your projects, whether it's for moving elements within a container or implementing complex event handling during dragging actions.
You can install DRAGSTUFF via npm:
npm install dragstuff
to import DRAGSTUFF:
import dragstuff from "dragstuff";
BASEIC EXAMPLE:
dragstuff.init("#cssSelector");
USE IT ON AN ARRAY:
items.forEach(item => {
dragstuff.init(item, {
bounds: ".container",
})
})
BOUND THE ELEMENT IN A CIRCULAR CONTAINER
dragstuff.init(item, {
bounds: {
type:"circle",
element: container
}
})
Ignore a list of child elements inside the selected element:
ingore: [el1, el2 ...]
call a function only if the user does initialize dragging:
onClick: () => {}
keep calling a function as long as the user is moving the mouse after initialzing drag.
onDrag: () => {}
call a function only once the user stops dragging
onDragEnd: () => {}
call a function once only if the user initialzed drag.
onDragStart: () => {}
call a function once on mouseup regardless on click or dragend.
onMouseUp: () => {}
call a function once on mousedown regardless on click or dragend
onMouseDown () => {}
specify the direction of the drag.
axisLock: "x"
can be set to x or y (or both but why)
specify the area where to not allow the object to be dragged beyond.
bounds: "cssElement"
or you can use an element
specify the threshold to init drag:
threshold: 20
specify the snapvalue:
liveSnap: 20
( automatically applies Math.ceil(value) )