{"id":16676088,"url":"https://github.com/mindplay-dk/zero-drag","last_synced_at":"2025-03-21T18:31:37.987Z","repository":{"id":57405606,"uuid":"125206935","full_name":"mindplay-dk/zero-drag","owner":"mindplay-dk","description":"Minimal abstraction of DOM drag-and-drop interactions","archived":false,"fork":false,"pushed_at":"2023-04-23T19:07:30.000Z","size":44,"stargazers_count":18,"open_issues_count":4,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T03:35:53.309Z","etag":null,"topics":["dom","drag-and-drop","sortable","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mindplay-dk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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}},"created_at":"2018-03-14T12:10:32.000Z","updated_at":"2024-08-12T18:50:10.000Z","dependencies_parsed_at":"2024-10-28T11:28:25.662Z","dependency_job_id":"696efc3e-243b-46af-9da9-b0b93e6b0f87","html_url":"https://github.com/mindplay-dk/zero-drag","commit_stats":{"total_commits":17,"total_committers":2,"mean_commits":8.5,"dds":0.05882352941176472,"last_synced_commit":"cef28657a9df4913ac00d4970f85ca7dcaa666f7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindplay-dk%2Fzero-drag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindplay-dk%2Fzero-drag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindplay-dk%2Fzero-drag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindplay-dk%2Fzero-drag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mindplay-dk","download_url":"https://codeload.github.com/mindplay-dk/zero-drag/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244848593,"owners_count":20520551,"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":["dom","drag-and-drop","sortable","typescript"],"created_at":"2024-10-12T13:09:07.248Z","updated_at":"2025-03-21T18:31:37.678Z","avatar_url":"https://github.com/mindplay-dk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `zero-drag`\n\nA minimalist abstraction of drag-and-drop *interactions only - without* abstracting the effects. ([why?](#why))\n\nPurpose-built for custom in-app drag-and-drop UI - if you need to exchange data/files with the desktop,\nthis is not the library you're looking for.\n\n**Features:**\n\n  * Generates drag-and-drop event listeners exposing simple start/drag/drop hooks\n  * Minimally abstracts dragged item and drop-target selection\n  * Reports drag distances and target locations in various useful ways\n  * Optional drag threshold (in pixels) before triggering your start hook\n  * Optional delayed re-targeting (improves user experience by tracking user intent)\n  * Small: just over 1K\n  * Works basically anywhere\n  * Written in Typescript: fully type-hinted\n\n**TODO:** tests, touch events, exchanging files/data with the desktop? (contributions welcome.)\n\n## Examples\n\nSome basic examples are available here:\n\nhttps://codesandbox.io/s/4jw0o0ox4x\n\nDisclaimer: I am *not* a designer, so this looks like a programmer made it. (contributions welcome!)\n\n## Install\n\nTo install in your project:\n\n    npm install zero-drag --save\n\nTo import from Typescript:\n\n```ts\nimport { makeListener } from \"zero-drag\";\n```\n\nUse auto-completion and refer to inline documentation for usage and API details.\n\n\u003ca name=\"why\"\u003e\u003c/a\u003e\n## Why?\n\nBecause reasons:\n\n  * Correctly implementing drag-and-drop interactions is difficult, error-prone and distracting.\n  * Implementing the *effects* of those interactions is already easy - there's no reason to abstract that.\n  * Cleanly separating the complexity of drag-and-drop from potentially complex effects make sense either way.\n  * Avoiding the implementation of any effects makes this library useful in many contexts, including plain DOM as well as most view-libraries/frameworks.\n\n## Alternatives\n\nSome alternative libs and how they differ:\n\n  * [`dragula`](https://www.npmjs.com/package/dragula) - more high-level library implementing things like sort-order\n    and visual effects; bridges to React and Angular.\n  * [`drag-on-drop`](https://www.npmjs.com/package/drag-on-drop) - larger, more high-level library implementing sortable\n    lists and trees; bridge to React.\n  * [`drag-drop`](https://www.npmjs.com/package/drag-drop) - uses HTML5 `drag`-events - if you need to exchange data\n    and files with the desktop, this may be the lib you want.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindplay-dk%2Fzero-drag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmindplay-dk%2Fzero-drag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindplay-dk%2Fzero-drag/lists"}