Official Documentation (↑ Draggable)

Installation

npm install drag-easy-components

Basic Usage

Import and use drag-easy-components in your JavaScript project:

import { makeDraggable } from "drag-easy-components";

const box = document.getElementById("box");
makeDraggable(box);

Using in HTML (Without a Bundler)

If you're not using a module bundler, include drag-easy-components directly in your HTML:

<script src="node_modules/drag-easy/dist/drag-easy.umd.js"></script>
<script>
    const box = document.getElementById("box");
    DragEasy.makeDraggable(box); 
</script>

Styling the Draggable Element

Customize the draggable box with CSS:

#box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    cursor: grab;
}

Additional

Restrict Dragging to One Axis

Limit movement to horizontal (`"x"`) or vertical (`"y"`) only:

makeDraggable(box, { axis: "x" }); // Only moves horizontally

Contain Dragging Inside a Parent

Keep the draggable element inside a container:

const container = document.getElementById("container");
makeDraggable(box, { container: container });

Event Callbacks

Run functions when dragging starts or ends:

makeDraggable(box, {
    onDragStart: () => console.log("Dragging started!"),
    onDragEnd: () => console.log("Dragging stopped!"),
});

Summary

With drag-easy-components, you can make elements draggable, restrict movement, set boundaries, and handle events—all with minimal code.