Getting Started
DragSelect is a small but professional, cross platform library with no dependencies that adds a selection mechanism similar to your operating system to the browser. It allows you to select multiple elements and drag and drop them around.
Let's discover how to use DragSelect in less than 2 minutes. You donโt believe me? Itโs very easy, youโll see!
๐งฉ Installation (Install it)โ
You can download the binary files and add them to your document. Or better use a Content Delivery Network (CDN). Or even better install it via a package manager like NPM:
- NPM
- Yarn
- Download
- CDN
- Bower (deprecated)
npm i -S dragselect
yarn add dragselect
- DragSelect (minified)
- DragSelect ES6 Module (minified)
- From our website:
<script src="https://dragselect.com/v2/ds.min.js"></script>
We don't recommend the direct linking for production set-up since you'll not benefit from versioning. Please use
npm
if you can.
- Modules
- Traditional
<script type=module src="https://unpkg.com/[email protected]/dist/DragSelect.es6m.js"></script>
Or Minified:
<script type=module src="https://unpkg.com/[email protected]/dist/ds.es6m.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/DragSelect.js"></script>
Or Minified:
<script src="https://unpkg.com/[email protected]/dist/ds.min.js"></script>
bower install --save dragselect
Note: the Bower project is deprecated. Please use npm instead. If you have to use bower, you'll have to build the project after installing it via
npm run rollup
๐ธ That's it, you're ready to rock! (Use it)โ
DragSelect supports module.exports
, AMD Modules
with define
, es6 modules
with .es6m
versions and has a fallback to global namespace for maximum out of the box support:
- ES6
- CommonJS
- AMD
- Global
- From CDN
import DragSelect from 'dragselect';
const ds = new DragSelect({
selectables: document.querySelectorAll('.selectable'),
});
ds.subscribe('callback', (e) => {
console.log(e);
});
const DragSelect = require('dragselect');
const ds = new DragSelect({
selectables: document.querySelectorAll('.selectable'),
});
ds.subscribe('callback', (e) => {
console.log(e);
});
require(['dragselect'], function (DragSelect) {
const ds = new DragSelect({
selectables: document.querySelectorAll('.selectable'),
});
ds.subscribe('callback', (e) => {
console.log(e);
});
});
const ds = new DragSelect({
selectables: document.querySelectorAll('.selectable'),
});
ds.subscribe('callback', (e) => {
console.log(e);
});
import DragSelect from 'https://unpkg.com/[email protected]/dist/ds.es6m.min.js'
const ds = new DragSelect({
selectables: document.querySelectorAll('.selectable'),
});
ds.subscribe('callback', (e) => {
console.log(e)
});
๐ฌ Aaaand action! (See it)โ
Pssst: try using your keyboard only or selecting multiple elements with Shift. It just works ;-)
Within a scroll-able Areaโ
With DropZonesโ
๐ What next?โ
Most importantly:
- If you like what you see, make sure to Star DragSelect
- Tell all your friends/colleagues.
- If you think it is worth continuing developing & maintaining DragSelect, please Sponsor or contribute!
Creating and maintaining useful tools is a lot of work. Thank you :-)
Learnโ
This page is just a very brief introduction showcasing a limited set of the many features. DragSelect is ultra extensible and feature rich! Make sure to read the guides and the documentation. If youโre stuck feel free to reach out on Github.