Dragging a selection on any enabled element

Usage no npm install needed!

<script type="module">
  import dragsnip from 'https://cdn.skypack.dev/dragsnip';



Plain JS tool for dragging bounding boxes on DOM elements. Handy to retrieve the relative position of the bounding box on the element.


npm install dragsnip


In your HTML code:

    <img class="snippable" src="myImage.jpg" />

In your JS code:

let dragsnip = require("dragsnip");

// select the DOM element you want to dragsnip on (yep, that's a verb as of now)
let snip_area = document.getElementsByClassName("snippable");

// For now only relative coordinates are being delivered to the callback
let cb = (start, end) => {
    console.log(`start: x: ${start.x} | y: ${start.y}`);
    console.log(`end: x: ${end.x} | y: ${end.y}`);

// register your DOM element alongside with your callback
dragsnip.register(snip_area, cb);

// Profit. Try to click and drag on your image


Made with ♥, pizza and beer by MaPa
alt text alt text alt text