drag-selectjs ⚡️

Make any element selectable with just a few lines of code 👊

• Lightweight ☁️
• Easy to use 🌞
• Compatible with any frontend framework 🔥

CodePen Demo

Installation

CLI

npm i drag-selectjs

or...

yarn add drag-selectjs

CDN

<script src="https://unpkg.com/drag-selectjs"></script>

Usage

First, add the data-dragselect attribute to any element you want to make selectable:

<div data-dragselect>SELECT ME!</div>

Then, add any styling for the drag-box and selected elements:

/* Class-names can be changed with `init('box-class', 'selected-class')` */
.__dragselect--box {
    background-color: rgba(0, 0, 0, 0.5);
}
.__dragselect--selected {
    border: 3px solid #808080;
}

Now, all you need to do is initialise drag-selectjs:

CLI

import { init, onSelected } from 'drag-selectjs'

init('drag-box-class', 'selected-element-class') // Arguments are optional

onSelected(selected => {
    console.log(selected) // [div.selected-element-class, ...]
})

CDN

DragSelect.init()

DragSelect.onSelected(selected => {
    console.log(selected)
})

Contributions welcome!