https://github.com/knadh/dragmove.js

A super tiny Javascript library to make DOM elements draggable and movable. ~500 bytes (minified+gzipped) and no dependencies.
https://github.com/knadh/dragmove.js

dom-manipulation drag-and-drop draggable draggable-elements move

Last synced: 6 days ago
JSON representation

A super tiny Javascript library to make DOM elements draggable and movable. ~500 bytes (minified+gzipped) and no dependencies.

• Host: GitHub
• URL: https://github.com/knadh/dragmove.js
• Owner: knadh
• License: mit
• Created: 2020-09-15T10:07:26.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-13T06:11:07.000Z (7 months ago)
• Last Synced: 2024-10-11T13:20:24.037Z (23 days ago)
• Topics: dom-manipulation, drag-and-drop, draggable, draggable-elements, move
• Language: JavaScript
• Homepage: https://knadh.github.io/dragmove.js/docs/
• Size: 19.5 KB
• Stars: 828
• Watchers: 15
• Forks: 44
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# dragmove.js

A super tiny Javascript library to make DOM elements draggable and movable. Has touch screen support. Zero dependencies and 500 bytes Gzipped. [Demo here](https://knadh.github.io/dragmove.js/docs/).

## Usage

### Node

```shell

npm install @knadh/dragmove

```

```javascript

import { dragmove } from @knadh/dragmove;

// (target, handler, onStart(target, x, y), onEnd(target, x, y)).

// onStart and onEnd are optional callbacks that receive target element, and x, y coordinates.

dragmove(document.querySelector("#box"), document.querySelector("#box .drag-handle"));

```

### ES6 module

[Check this example](https://github.com/knadh/dragmove.js/blob/master/docs/index.html) to include dragmove.js as a `` directly on an HTML page.

Licensed under the MIT License.