drag-selector
v1.0.6
Published
drag selector
Downloads
6
Maintainers
Readme
DragSelector
DragSelector is a small and easy-to-use JavaScript library that allows you to select HTML elements by drag-and-drop, just like selecting files on your desktop.
You can find the source code here
Getting started
You can use NPM or YARN to install the library like this:
npm i drag-selector --save
# or
yarn add drag-selector
How to use
DragSelector supports importing the module into your code by using es6 Modules, module.exports, AMD Modules
const parentDom = document.getElementById('.root')
// es6
import DragSelector from 'drag-selector'
const dragger = new DragSelector(parentDom)
// AMD Modules
require(['drag-selector'], function(DragSelector) {
const dragger = new DragSelector(parentDom)
})
// CommonJS
const DragSelector = require('drag-selector')
const dragger = new DragSelector(parentDom)
Advanced options
You can pass in some configuration options as the second parameter in the constructor of DragSelector
const parentDom = document.getElementById('.root')
const dragger = new DragSelector(parentDom, {
// The callback property is a function that takes two parameters: the first is an array of selected elements, and the second is all child elements of the parent element
callback: (selected, allChildren) => {
// do something
},
// The deep property is a boolean value. When set to true, DragSelector will search for all child elements under the parent element. When set to false, DragSelector will only search for the first level of child elements
deep: true, // default value is false
selectorStyle: { // Customize selection box styles, using single camel case for style names
backgroundColor: '#red',
},
})