README
dragsnip
Plain JS tool for dragging bounding boxes on DOM elements. Handy to retrieve the relative position of the bounding box on the element.
Install
npm install dragsnip
Usage
In your HTML code:
<div>
<img class="snippable" src="myImage.jpg" />
</div>
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