mxcd/dragsnip

Plain JS tool for dragging bounding boxes on DOM elements.

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}`);
};

// define options
const options = {
    strokeColor: '#F0FFFF', // Defaults to '#000000'
}

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

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

Author

Made with ♥, pizza and beer by MaPa