Home

Awesome

how-draggable

Make anything draggable. And editable. version License: MIT

Live demo (mouse, touch, keyboard, or screen reader!)

yarn add how-draggable

import { makeElementDraggableAndEditable } from "how-draggable";

or with CDNs:

https://cdn.jsdelivr.net/gh/hchiam/how-draggable@main/makeElementDraggable.js
https://cdn.jsdelivr.net/gh/hchiam/how-draggable@main/makeElementDraggableAndEditable.js

https://cdn.jsdelivr.net/gh/hchiam/how-draggable@3.7.1/makeElementDraggable.js
https://cdn.jsdelivr.net/gh/hchiam/how-draggable@3.7.1/makeElementDraggableAndEditable.js

Example usage:

var element = document.getElementById("#some-selector");
var settings = {
  // NOTE: settings are all optional:
  disableKeyboardMovement: false, // false by default
  disableStyleReset: false, // false by default
  disableEditing: false, // false by default
  // snapPoints?: SnapPoint[];
  // snapGridSize?: number;
  // snapThreshold?: number;
  // snapWithinElements?: HTMLElement[];
  mouseDownCallback: function (element) {}, // optional
  touchStartCallback: function (element) {}, // optional
  mouseMoveCallback: function (element) {}, // optional
  touchMoveCallback: function (element) {}, // optional
  mouseUpCallback: function (element) {}, // optional
  touchEndCallback: function (element) {}, // optional
  snapCallback: function (left, top, containerElement) {
    // optional
    alert("left offset " + left + " and top offset " + top);
  },
  keyboardMoveCallback: function (element) {}, // optional
  blurCallback: function (element) {}, // optional
  customAriaLabel: function (element, settings) {
    return `custom aria-label: ${element.innerText}`;
  }, // optional
};
// now to actually use it:
makeElementDraggableAndEditable(element, settings);
// or: makeElementDraggable(element, settings);

CDN usage:

<script
  src="https://cdn.jsdelivr.net/gh/hchiam/how-draggable@3.7.1/makeElementDraggable.js"
  integrity="sha384-0NcSLRjK3MTgQNTsFK8R51U/6nQrGZKzZ4HN7TPCLMd+GvLIA7ZS9mOOKJGhYbFF"
  crossorigin="anonymous"
></script>

Or:

<script
  src="https://cdn.jsdelivr.net/gh/hchiam/how-draggable@3.7.1/makeElementDraggableAndEditable.js"
  integrity="sha384-1Muk1rYWjyrIxtGKmjGRmZbPw7BtOrAUVZAUqflrCbjcl6mZWwoPnPfeJiXNDztG"
  crossorigin="anonymous"
></script>

Development notes

Edit the TS files! The JS files are generated from the TS files.

To automatically generate the JS files and do type checking against the .d.ts files while developing from within this repo:

yarn global add typescript
npx tsc --init # or tsc --init # creates tsconfig.json
tsc

To run a demo on http://localhost:5173/ :

yarn
yarn demo

To get the sha384-... values to put into integrity="..." of script tags:

bash get-integrity.sh;

A newer example of how to publish to npm (package.json setup only + yarn pub):