🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

dragsnip

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dragsnip

Dragging a selection on any enabled element

0.3.1
latest
Source
npm
Version published
Maintainers
1
Created
Source

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
alt text alt text alt text

FAQs

Package last updated on 01 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts