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: "",
  },
];