{"id":25286544,"url":"https://github.com/thibaultjanbeyer/dragselect","last_synced_at":"2025-05-13T23:03:56.117Z","repository":{"id":39615120,"uuid":"100693560","full_name":"ThibaultJanBeyer/DragSelect","owner":"ThibaultJanBeyer","description":"An easy JavaScript library for selecting and moving elements. With no dependencies. Drag-Select \u0026 Drag-And-Drop. – Examples:","archived":false,"fork":false,"pushed_at":"2025-04-29T01:59:30.000Z","size":17221,"stargazers_count":750,"open_issues_count":11,"forks_count":82,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-30T10:37:32.099Z","etag":null,"topics":["drag","drag-and-drop","drag-n-drop","drag-select","drag-selection","drag-selection-library","dragselect","javascript","lightweight","no-dependencies","npm","production-ready","selection"],"latest_commit_sha":null,"homepage":"https://dragselect.com/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ThibaultJanBeyer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["ThibaultJanBeyer"],"custom":["https://www.blockchain.com/btc/address/1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC"]}},"created_at":"2017-08-18T08:59:12.000Z","updated_at":"2025-04-30T06:39:55.000Z","dependencies_parsed_at":"2022-07-20T03:32:37.910Z","dependency_job_id":"93a0a55a-ccba-4c31-b55b-61f2cbd5d69a","html_url":"https://github.com/ThibaultJanBeyer/DragSelect","commit_stats":null,"previous_names":[],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThibaultJanBeyer%2FDragSelect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThibaultJanBeyer%2FDragSelect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThibaultJanBeyer%2FDragSelect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThibaultJanBeyer%2FDragSelect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThibaultJanBeyer","download_url":"https://codeload.github.com/ThibaultJanBeyer/DragSelect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254040415,"owners_count":22004533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag","drag-and-drop","drag-n-drop","drag-select","drag-selection","drag-selection-library","dragselect","javascript","lightweight","no-dependencies","npm","production-ready","selection"],"created_at":"2025-02-12T21:50:31.730Z","updated_at":"2025-05-13T23:03:56.098Z","avatar_url":"https://github.com/ThibaultJanBeyer.png","language":"HTML","funding_links":["https://github.com/sponsors/ThibaultJanBeyer","https://www.blockchain.com/btc/address/1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\" style=\"text-align: center\" \u003e\n  \u003ca href=\"https://DragSelect.com/\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://dragselect.com/img/dragselect-logo.png\"\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://dragselect.com/img/dragselect-logo-alt.png\"\u003e\n      \u003cimg alt=\"The DragSelect logo: a selection symbol, a hand, a drop symbol and a mouse within a selection square.\" width=\"300\" src=\"https://dragselect.com/img/dragselect-logo.png\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\" style=\"text-align: center\"\u003e\n  \u003ca href=\"https://dragselect.com/\"\u003eProject-Page\u003c/a\u003e |\n  \u003ca href=\"https://dragselect.com/docs/intro\"\u003eDocumentation\u003c/a\u003e |\n  \u003ca href=\"https://github.com/ThibaultJanBeyer/DragSelect/\"\u003eGithub\u003c/a\u003e | \n  \u003ca href=\"https://www.npmjs.com/package/dragselect\"\u003eNPM\u003c/a\u003e | \n  \u003ca href=\"https://dragselect.com/licenses\"\u003eLicenses\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\" style=\"text-align: center; margin-bottom: 50px;\"\u003e\n\u003ca href=\"https://github.com/ThibaultJanBeyer/DragSelect/actions\"\u003e\u003cimg alt=\"Build Status\" src=\"https://github.com/ThibaultJanBeyer/DragSelect/actions/workflows/github-actions-build.yml/badge.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://dragselect.com/ds.min.js\"\u003e\u003cimg alt=\"gzip size\" src=\"https://img.badgesize.io/https://dragselect.com/ds.min.js?compression=gzip\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/dragselect\"\u003e\u003cimg alt=\"npm downloads count\" src=\"https://img.shields.io/npm/dt/dragselect.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThibaultJanBeyer/DragSelect/blob/master/DragSelect/package.json\"\u003e\u003cimg alt=\"No Dependency\" src=\"https://img.shields.io/badge/dependencies-none-informational\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThibaultJanBeyer/DragSelect/blob/master/CONTRIBUTING.md\"\u003e\u003cimg alt=\"Contributors Welcome\" src=\"https://img.shields.io/badge/contributors-welcome-blueviolet\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/sponsors/ThibaultJanBeyer\"\u003e\u003cimg alt=\"Sponsors Welcome\" src=\"https://img.shields.io/badge/sponsors-welcome-blueviolet\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# DragSelect [![GitHub release](https://img.shields.io/github/release/ThibaultJanBeyer/DragSelect.svg)](https://GitHub.com/ThibaultJanBeyer/DragSelect/releases/)\n\neasily add a selection algorithm to your application/website.\n\nThe documentation is being migrated to [https://dragselect.com/](https://dragselect.com/). Find the [most up to date documentation there](http://dragselect.com/docs/intro).\n\n# TOC\n\n- [Project Page: Demo \\\u0026 Info](#project-page-demo--info)\n- [Key-Features](#key-features)\n- [Why?](#why)\n- [Supporters](#supporters)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Constructor Properties (Settings)](#constructor-properties-settings)\n- [Event Callbacks](#event-callbacks)\n- [Methods](#methods)\n- [CSS Classes](#css-classes)\n- [Have Fun!](#have-fun)\n\n# Project Page: Demo \u0026 Info\n\n- 🧑‍💻 Project Page: [https://dragselect.com/](https://dragselect.com/)\n- 📘 Docs Page: [https://dragselect.com/docs/intro](https://dragselect.com/docs/intro)\n\n# Key-Features\n\n- **No dependencies** [![No Dependency](https://img.shields.io/badge/dependencies-none-informational)](https://github.com/ThibaultJanBeyer/DragSelect/blob/master/DragSelect/package.json)\n- Hyper customizable\n- Replicates operating system drag-selection in the browser\n- Accessibility (a11y)\n- Use modifier keys to make multiple independent selections\n- Select, Drag and Drop also also via keyboard\n- Supports all major browsers\n- Lightweight, only ![gzip size](https://img.badgesize.io/https://dragselect.com/ds.min.js?compression=gzip)\n- Popular: ![npm downloads count](https://img.shields.io/npm/dt/dragselect.svg) on npm\n- DragSelect was written with Performance in mind (can easily select \u003e15.000 Elements)\n- Supports SVG\n- Supports mobile (touch interaction)\n- Free \u0026 open source\n- Easy to use\n\n[![demo-gif](https://dragselect.com/img/dragselect.gif)](https://dragselect.com/)\n\n# Why?\n\nBecause apparently there was nothing that does not require jquery out there.  \nThis is better than https://jqueryui.com/selectable/ or https://jqueryui.com/draggable/ and has no dependencies.\nIt is used in multiple professional rich interface applications, i.e. to have a file management system. The user can select files to organize them and change their metadata, with this plugin our users could select multiple files and perform batch/bulk-operations (applying changes to multiple files at once). Another example is a huge, graphical cloud hosting manager with millions of active users. Users can select multiple servers, storages, etc. on an art-board to perform multi-operations, re-organize them, move them on the UI or batch-delete. We’re running it since January 18' it’s super helpful and very stable, let’s keep it that way. I can easily think of dozens other use-cases. I’m really keen to know how you use it in your projects, please let us know.\n\n# Supporters\n\nPlease donate to support the countless hours of hard work \u0026 support. Especially if your company makes money, then there is no excuse. Thank you :)\n\nIf you're too poor or broke you can still support us with your time instead by [contributing to the code](https://github.com/ThibaultJanBeyer/DragSelect/blob/master/CONTRIBUTING.md)!\n\n## Thanks To:\n\n### LambdaTest\n\n\u003ca href=\"https://www.lambdatest.com/\" target=\"_blank\"\u003e\n  \u003cpicture\u003e\n    \u003csource\n      media=\"(prefers-color-scheme: light)\"\n      srcset=\"https://www.lambdatest.com/support/img/logo.svg\"\n    /\u003e\n    \u003csource\n      media=\"(prefers-color-scheme: dark)\"\n      srcset=\"https://www.lambdatest.com/resources/images/logo-white.svg\"\n    /\u003e\n    \u003cimg\n      alt=\"LambdaTest\"\n      width=\"147\"\n      src=\"https://www.lambdatest.com/support/img/logo.svg\"\n    /\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\n[LambdaTest](https://www.lambdatest.com/) is a Next-Generation Mobile App and Cross Browser Testing Cloud. They support this open source projects by providing us with a free account and with a generous donation!\n\n### BrowserStack\n\n\u003ca href=\"https://www.browserstack.com/\"\u003e\u003cimg src=\"https://cdn.worldvectorlogo.com/logos/browserstack.svg\" alt=\"Browserstack\" width=\"100px\" /\u003e\u003c/a\u003e\n\n[BrowserStack](https://www.browserstack.com/) is a service for cross-browser testing. They support this open source projects by providing us with a [free account](https://www.browserstack.com/open-source)!\n\n### DigitalOcean\n\n\u003ca href=\"https://www.digitalocean.com/\"\u003e\u003cimg src=\"https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_vertical_blue.svg\" alt=\"DigitalOcean\" width=\"150px\" /\u003e\u003c/a\u003e\n\n[DigitalOcean](https://www.digitalocean.com/) is a cloud hosting service. They support this open source projects by providing us with [free credits](https://www.digitalocean.com/open-source/credits-for-projects)!\n\n### You?\n\n[You?](https://github.com/sponsors/ThibaultJanBeyer)\n\nShow your appreciation and support with a donation! [Direct Donation to DragSelect](https://www.blockchain.com/btc/address/1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC) (via Bitcoin: `1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC`). Or sponsor via [GitHub Sponsors](https://github.com/sponsors/ThibaultJanBeyer) or [Get in touch](mailto:thibault.beyer@gmail.com).\n\nDonations are distributed with all project contributors proportionally to their involvement. We are grateful for any amount: we have more than ![npm downloads count](https://img.shields.io/npm/dt/dragselect.svg), imagine how much we'd have if everyone would have had donated only 1$ 🤩 (unfortunately this is just a dream). If you donate, we can display your logo here if you want, which will give you infinite fame, fortune and help you recruit great talent.\n\n# Installation\n\nRead the [Getting Started](http://dragselect.com/docs/intro).\n\n## NPM\n\n```console\nnpm install --save dragselect\n```\n\n## Yarn\n\n```console\nyarn add dragselect\n```\n\n## Global\n\nYou can still [download the file](https://dragselect.com/DragSelect.js) ([minified](https://dragselect.com/ds.min.js)) and add it to your document:\n\n```html\n\u003cscript src=\"https://unpkg.com/dragselect@latest/dist/ds.min.js\"\u003e\u003c/script\u003e\n```\n\n\u003e Note: if you are using `\u003cscript type=module` you can use the `DragSelect.esm.js` or `ds.esm.min.js` files as they include `export default DragSelect`\n\n\u003e We don’t recommend the direct linking for production set-up. Please use `npm` if you can.\n\n## That's it, you're ready to rock!\n\nOf course you can also just include the code within your code and bundle it to save a request.\n\nDragSelect supports `module.exports`, `AMD Modules` with `define`, `es6 modules` with `.esm` versions and has a fallback to global namespace for maximum out of the box support.\n\n# Usage\n\nNow in your JavaScript you can simply pass elements to the function like so:\n\n## Simple\n\nRead the [Simple Usage Guide](http://dragselect.com/docs/guided-examples/Simple)\n\nThe simplest possible usage.  \nChoose which elements can be selected:\n\n```javascript\nnew DragSelect({\n  selectables: document.getElementsByClassName(\"selectable-nodes\"),\n});\n```\n\nFind a live [example in the Guide](http://dragselect.com/docs/guided-examples/Simple)\n\n## Within a Scroll-Able Area\n\nRead the [Area Guide](http://dragselect.com/docs/guided-examples/Area)\n\nHere the selection is constrained. You can only use the selection/drag inside of the area container:\n\n```javascript\nnew DragSelect({\n  selectables: document.getElementsByClassName(\"selectable-nodes\"),\n  area: document.getElementById(\"area\"),\n});\n```\n\nFind a live [example in the Area Guide](http://dragselect.com/docs/guided-examples/Area)\n\n## With DropZones\n\nRead the [DropZones Guide](http://dragselect.com/docs/guided-examples/DropZones) where you’ll also find a live example.\n\n## Extended\n\nAll options are optional. You could also just initiate the Dragselect by `new DragSelect({});` without any option.\n\nFind all possible properties and methods in **[the docs](https://dragselect.com/docs/category/api)**\n\n\u003e Hint: you can also use the \"shift\", \"ctrl\" or \"command\" key to make multiple independent selections.\n\n## React\n\nRead the [React Guide](http://dragselect.com/docs/guided-examples/React)\n\n## Mobile/Touch usage\n\nRead the [Mobile Touch Guide](http://dragselect.com/docs/guided-examples/Mobile-Touch)\n\n## Accessibility (a11y)\n\n**DragSelect is accessible by default**:\n\n\u003e TLDR;  \n\u003e =\u003e Your `selectables` should be buttons: `\u003cbutton type=\"button\"\u003e\u003c/button\u003e`.  \n\u003e =\u003e \u003ckbd\u003eArrowKeys\u003c/kbd\u003e are used for keyboard dragging.\n\nRead the [Accessibility Guide](http://dragselect.com/docs/guided-examples/Accessibility)\n\n## Use Your Own Drag \u0026 Drop\n\nRead the [Custom Drag and Drop Guide](http://dragselect.com/docs/guided-examples/CustomDnD)\n\n# Constructor Properties (Settings)\n\n_DragSelect is hyper customizable_. Note, all properties are optional.\n\nRead the [Settings API docs](http://dragselect.com/docs/API/Settings)\n\nMoreover any setting can also be updated or added after the initialization, see [post-initialization setting updates](#post-initialization-setting-updates).\n\n## Post-Initialization Setting-Updates\n\nAny setting can be updated/added after initialization by using the `setSettings` method. Here is an example updating the `area` and the `selectables`:\n\n```JavaScript\nconst ds = new DragSelect({})\nds.setSettings({\n  selectables: document.getElementsByClassName('selectable-nodes'),\n  area: document.getElementById('area')\n})\n```\n\n# Event Callbacks\n\nRead the [Events API docs](http://dragselect.com/docs/API/Events)\n\nEvent Callbacks are used like this:\n\n```JavaScript\nds.subscribe('\u003cevent_name\u003e', (callback_object) =\u003e {})\n```\n\nFor all available callback `event_names` and their respective `callback_object`, please read the [Events API docs](http://dragselect.com/docs/API/Events)\n\n# Methods\n\nRead the [Methods API docs](http://dragselect.com/docs/API/Methods)\n\n# CSS Classes\n\nRead the [CSS Classes API docs](http://dragselect.com/docs/API/CSS-Classes)\n\n# Have Fun!\n\nCreating and maintaining useful tools is a lot of work.\nSo don’t forget to give this repository a star if you find it useful.\nStar this repo, tell all your friends and start contributing and/or [donating 1$](https://github.com/sponsors/ThibaultJanBeyer) to keep it running. Thank you :)\n\n[![Typewriter Gif](https://dragselect.com/img/typewriter.gif)](https://thibaultjanbeyer.com/)\n\n[http://dragselect.com/](http://dragselect.com/) | [documentation](http://dragselect.com/docs/intro)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthibaultjanbeyer%2Fdragselect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthibaultjanbeyer%2Fdragselect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthibaultjanbeyer%2Fdragselect/lists"}