A super tiny Javascript library to make DOM elements draggable and movable. ~500 bytes and no dependencies.

Overview

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.

Usage

Node

npm install @knadh/dragmove
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 to include dragmove.js as a <script> directly on an HTML page.

Licensed under the MIT License.

Comments
  • Uncaught error when build with webpack

    Uncaught error when build with webpack

    Hi, Using webpack in development (with watch without build and finalization) everything works perfectly. But when I go to build I get this error from the browser: TypeError: can't access property "addEventListener", (void 0) is undefined. I use Laravel Mix for build the assets. I paste here the lines of code I use, maybe I wrote something wrong.

    
    (function () {
      'use strict';
    
      document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
    
      function handleDOMContentLoaded() {
        document.querySelectorAll('.collage__item').forEach(function (el) {
          dragmove(el, el);
        })
      }
    })();
    question 
    opened by gioppy 4
  • onEnd functions all fire for every `mouseup` event

    onEnd functions all fire for every `mouseup` event

    On line 49,

      document.addEventListener(_isTouch ? "touchend" : "mouseup", function() {
       /* ... */
      }
    

    I think this should be target instead of document, no? This way, only the functions specific to an element get fired (not for every onEnd ever registered).

    bug 
    opened by GreyMatteOr 3
  • onEnd won't run if the handler has child nodes covering it

    onEnd won't run if the handler has child nodes covering it

    On line 53,

    if (onEnd && e.target === handler) {
      onEnd(target, parseInt(target.style.left), parseInt(target.style.top));
    }
    

    If the handler has child nodes covering it, e.target will end up being the child node you clicked on, not the handler itself, so onEnd won't run. One way to replicate this bug is through the example in docs/index.html by changing it like so:

    Add a span element to one of the handlers:

    <div id="test" class="parent" data-drag-bound="true">
      <div class="handle" style=""><span>Drag here</span></div>
    </div>
    

    and make sure .handle has a minimum height, like say 24px for this example:

    .handle {
      background: #888;
      cursor: move;
      width: 130px;
      min-height: 24px;
      color: #fff;
      padding: 10px;
    }
    

    Then try dragging the element outside the view by clicking on its text first, and you'll see that the snapping won't happen.

    I was working on adding buttons and menus in the handler nodes in my project, which is how I found the bug. The dragging works perfectly fine, just to be clear. It's just onEnd that's the issue.

    question 
    opened by svntax 2
  • data-drag-boundary documented, fixed sticking to boundaries

    data-drag-boundary documented, fixed sticking to boundaries

    First, one star and thank you for this lightweight utility! While integrating it I spotted the following minor issues related to dragBoundary:

    1. data-drag-boundary is not documented (neither is data-drag-enabled)
    2. when crossing boundaries movement should not be aborted (it feels like the draggable got stuck) but instead the element should stick to the boundary
    3. the default for data-drag-boundary should probably be true

    This PR addresses the first 2 points.

    opened by geonanorch 0
  • Unregister element

    Unregister element

    If an element no longer needs to be dragged, could it be "unregistered" and removed from the callbacks array? This would help save memory especially in single page apps where several views could potentially be shown or rerendered.

    const instance = dragmove(...)
    instance.unregister()
    
    // or
    
    const id = dragmove(...)
    enddragmove(id)
    
    enhancement 
    opened by dpikt 1
Owner
Kailash Nadh
Hobbyist developer | CTO @zerodha | Volunteer @fossunited @rainmatter-foundation
Kailash Nadh
👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.

Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro

Vic Shóstak 35 Aug 24, 2022
Tax-finder - A web application sourcing and sharing tax data on Fortune 500 corporations.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Bennett Huffman 1 Jan 1, 2022
A tiny (108 bytes), secure, URL-friendly, unique string ID generator for JavaScript

Nano ID English | Русский | 简体中文 | Bahasa Indonesia A tiny, secure, URL-friendly, unique string ID generator for JavaScript. “An amazing level of sens

Andrey Sitnik 19.6k Jan 8, 2023
Create a deep copy of a set of matched elements with the dynamic state of all form elements copied to the cloned elements.

jq-deepest-copy FUNCTION: Create a deep copy of a set of matched elements while preserving the dynamic state of any matched form elements. Example Use

Michael Coughlin 5 Oct 28, 2022
Draggabilly Make that shiz draggable

Draggabilly Make that shiz draggable draggabilly.desandro.com Rad because it supports mouse and touch devices. Draggabilly v3.0.0 Install Download dra

David DeSandro 3.8k Dec 17, 2022
A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements

JavaScript Project to Manipulate DOM Elements DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mech

DFlex 1.5k Jan 8, 2023
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

What is it ? Shaders are the new front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot

Martin Laxenaire 1.4k Jan 1, 2023
JavaScript library to resize, reduce, or change ranges of DOM elements.

Range.js JavaScript library to resize, reduce, or change ranges of DOM elements using the HTML5 <input type="range"> element. Usage: Include range.js

Kyle Belanger 4 Jun 3, 2021
🖱 A JavaScript library for interactively picking DOM elements

pick-dom-element A JavaScript library (written in TypeScript) for interactively picking DOM elements. Usage Create an instance of the ElementPicker cl

Harry Marr 23 Dec 4, 2022
Super tiny size multi-touch gestures library for the web.    You can touch this →

Preview You can touch this → http://alloyteam.github.io/AlloyFinger/ Install You can install it via npm: npm install alloyfinger Usage var af = new Al

腾讯 AlloyTeam 3.3k Dec 12, 2022
An extension of DOM-testing-library to provide hooks into the shadow dom

Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit

Konnor Rogers 28 Dec 13, 2022
Interactive To Do List, draggable tasks, optimized for desktop and mobile screen sizes. It reserves data in local storage. Built with HTML, CSS, and JavaScript.

To Do List Interactive daily To-Do List Built With Major languages: html, css, javascript Frameworks: Technologies used: Webpack Live Demo Live Demo L

Jafar Yousef 6 Aug 4, 2022
An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.

Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P

Okoye Charles 14 Oct 3, 2022
A pure javascript class for paginating through any number of DOM elements

PurePajinate A pure javascript class for paginating through any number of DOM elements. Inspired by Pajinate, a plugin for jQuery. Options Option Type

Olivier Buisard 3 Nov 21, 2022
2 player tictactoe-hosting TCP server in 640 bytes

tictactinytoe 2 player tictactoe-hosting TCP server in 640 bytes: F=_=>{x=o=z=0;t=1};F();require("net").createServer(c=>{h="\n";w=s=>c.write(s+h);if(o

Shivam Mamgain 25 Jul 27, 2022
A POC of a Discord.js bot that sends 3D rendering instructions to a Go server through gRPC which responds with the image bytes which are then sent back on Discord.

A POC of a Discord.js bot that sends 3D rendering instructions to a Go server through gRPC which responds with the image bytes which are then sent back on Discord.

Henrique Corrêa 5 Jan 8, 2022
Creates a table of contents in a DOM element optionally linked to with anchors. No jQuery or other dependencies.

HTML-Contents Creates a table of contents in a DOM element optionally linked to with anchors. No dependencies. @psalmody Get It We're on npm: npm i ht

Michael Tallino 3 Oct 25, 2022
Custom Vitest matchers to test the state of the DOM, forked from jest-dom.

vitest-dom Custom Vitest matchers to test the state of the DOM This library is a fork of @testing-library/jest-dom. It shares that library's implement

Chance Strickland 14 Dec 16, 2022
LiveJSON provides LiveView-like updating for JSON objects rather than DOM elements.

live_json LiveJSON provides LiveView-like updating for JSON objects rather than DOM elements. It works within your existing LiveViews - just use push_

Rich Jones 57 Dec 29, 2022