Draggable API
Dragging elements without interacting with other elements is the layout.
npm install @dflex/draggable
If you already read the Drag and Drop API documentation, you can skip this section. All the mechanisms are the same.
import { store, Draggable } from "@dflex/draggable";
Each element should be registered in draggable store in order to be dragged later.
store.register(RegisterInput);
Where RegisterInput
is an object with the following properties:
id?: string
is a unique identifier for an element in the registry. Duplicate ids will cause confusion and prevent DnD from working properly.ref?: HTMLElement
targeted DOM element. Should be provided if you haven't provided the id.
The dragging event should be created when onmousedown
is fired. So you
initialized the element before start dragging.
const draggableEvent = new Draggable(id, clickCoordinates);
id: string
registered element-id in the store.clickCoordinates
is an object with{x: number, y: number}
contains the coordinates of the mouse/touch click.
draggableEvent.dragAt(x, y);
x: number
is event.clientX, the horizontal click coordinate.y: number
is event.clientY, the vertical click coordinate.
draggableEvent.endDragging();
It's necessary to cleanup the element from store when the element won't be used or will be removed/unmounted from the DOM to prevent memory leaks.
store.unregister(id);
id: string
registered element-id.
You can also control the few style properties that Draggable use when dragging
the registered element with the static property draggedStyle
.
interface DraggedStyle = { prop: string; dragValue: string; afterDragValue: string | null;}[];
const draggedStyle = [ { prop: "position", dragValue: "relative", afterDragValue: "", }, { prop: "zIndex", dragValue: "99", afterDragValue: "", }, { prop: "userSelect", dragValue: "none", afterDragValue: "", },];