hcg-draggable

Lightweight draggable elements for vanilla JavaScript. Zero dependencies.

• GitHub: github.com/html-code-generator/hcg-draggable
• npm: npmjs.com/package/hcg-draggable
• Documentation & demo: html-code-generator.com/javascript/draggable-library

Install

npm install hcg-draggable

Quick start

Bundler (webpack, Vite, etc.):

import hcgDraggable from "hcg-draggable";
import "hcg-draggable/hcg-draggable.css";

hcgDraggable(".panel", { containment: "parent" });

CommonJS:

const hcgDraggable = require("hcg-draggable");
require("hcg-draggable/hcg-draggable.css");

Script tag (CDN):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hcg-draggable@1/hcg-draggable.css">
<script src="https://cdn.jsdelivr.net/npm/hcg-draggable@1/hcg-draggable.js"></script>

<div data-hcg-draggable>drag me</div>

Basic usage

<div data-hcg-draggable>drag me</div>

hcgDraggable("#box", {
  handle: ".bar",
  axis: "x",
  containment: "parent",
  grid: [20, 20],
  dragThreshold: 5,
  revert: false,
  onEnd: function (e) { console.log(e.x, e.y, e.moved); }
});

Data attributes

<div data-hcg-draggable data-hcg-axis="x" data-hcg-containment="parent">drag me</div>

| Attribute | Maps to | | --- | --- | | data-hcg-draggable | enables auto-init | | data-hcg-handle | handle | | data-hcg-cancel | cancel | | data-hcg-threshold | dragThreshold | | data-hcg-axis | axis | | data-hcg-containment | containment | | data-hcg-grid | grid | | data-hcg-disabled | disabled | | data-hcg-bring-to-front | bringToFront | | data-hcg-revert | revert |

Instance API

const d = hcgDraggable("#box");
d.setOption("axis", "y");
d.contain();
d.disable();
d.destroy();

Documentation

Full API reference, live demos, React examples, and options tables:

https://www.html-code-generator.com/javascript/draggable-library

License

MIT - see LICENSE.