{"id":22160373,"url":"https://github.com/rozek/svelte-drag-drop-touch","last_synced_at":"2025-07-26T09:31:29.304Z","repository":{"id":57375243,"uuid":"376071674","full_name":"rozek/svelte-drag-drop-touch","owner":"rozek","description":"HTML5 Drag-and-Drop support for mobile devices (not only for Svelte)","archived":false,"fork":false,"pushed_at":"2022-03-01T06:03:47.000Z","size":124,"stargazers_count":20,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-12T00:56:05.747Z","etag":null,"topics":["html5-drag","mobile","mouse-emulation","polyfill","touch-events"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rozek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-11T15:43:02.000Z","updated_at":"2025-07-11T02:48:33.000Z","dependencies_parsed_at":"2022-09-05T14:11:26.713Z","dependency_job_id":null,"html_url":"https://github.com/rozek/svelte-drag-drop-touch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rozek/svelte-drag-drop-touch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-drag-drop-touch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-drag-drop-touch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-drag-drop-touch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-drag-drop-touch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/svelte-drag-drop-touch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-drag-drop-touch/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267145508,"owners_count":24042650,"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","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["html5-drag","mobile","mouse-emulation","polyfill","touch-events"],"created_at":"2024-12-02T04:07:36.543Z","updated_at":"2025-07-26T09:31:28.987Z","avatar_url":"https://github.com/rozek.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-drag-drop-touch #\n\nHTML5 Drag-and-Drop support for mobile devices (not only for Svelte)\n \n**NPM users**: please consider the [Github README](https://github.com/rozek/svelte-viewport-info/blob/main/README.md) for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)\n\n\u003e Just a small note: if you like this module and plan to use it, consider \"starring\" this repository (you will find the \"Star\" button on the top right of this page), so that I know which of my repositories to take most care of.\n\n## Installation ##\n\n`svelte-drag-drop-touch` may be used as an ECMAScript module (ESM), a CommonJS or AMD module or from a global variable.\n\nYou may either install the package into your build environment using [NPM](https://docs.npmjs.com/) with the command\n\n```\nnpm install svelte-drag-drop-touch\n```\n\nor load the plain script file directly\n\n```html\n\u003cscript src=\"https://unpkg.com/svelte-drag-drop-touch\"\u003e\u003c/script\u003e\n```\n\n## Access ##\n\nWhen used within Svelte, you should always import the package in a module context:\n\n```html\n\u003cscript context=\"module\"\u003e\n  import DragDropTouch from 'svelte-drag-drop-touch'\n\u003c/script\u003e\n```\n\nOtherwise, the kind of import depends on the type of module you prefer. \n \n* ESM: `import DragDropTouch from 'svelte-drag-drop-touch'`\n* CommonJS: `const DragDropTouch = require('svelte-drag-drop-touch')`\n* AMD: `require(['svelte-drag-drop-touch'], (DragDropTouch) =\u003e {...})`\n\nIn any case, a simple import is all you need to use HTML5 Drag-and-Drop on mobile devices - (apart from handling DragEvents) there is no extra programming required.\n\n## Example ##\n\nSeveral examples are available on the Svelte REPL - feel free to play with them! The most basic one is\n\n* [svelte-drag-drop-touch](https://svelte.dev/repl/ca95f735e4ff495c9d41d827354744f1)\n\nAdditional, more detailled examples may be found below.\n\n## Background Information ##\n\n[Bernardo Castilho](https://github.com/Bernardo-Castilho) has written a nice (and lightweight) [Drag-and-Drop polyfill](https://github.com/Bernardo-Castilho/dragdroptouch) which brings HTML5 Drag-and-Drop capabilities to mobile devices. Unfortunately, the NPM package for that polyfill is outdated and does not seem to be updated.\n\n`svelte-drag-drop-touch` just brings a TypeScript definition file and a trivial wrapper around the original code and bundles these with the latest version of `DragDropTouch.js` into an NPM package that may easily be imported into (not only) a Svelte application.\n\n**All the heavy lifting is done by `DragDropTouch.js`, thus, all credits go to [Bernardo Castilho](https://github.com/Bernardo-Castilho)!**\n\n## Additional Examples ##\n\n* [Drop- and No-Drop-Zones](https://svelte.dev/repl/49e42554b5c844c3a7f10aa4b997e969) - look where the events are sent to\n* [plain Dragging](https://svelte.dev/repl/9cec631684f34f20ac04ddca57e9eb77) - could be used to combine plain dragging with drag-and-drop\n* [Flicking](https://svelte.dev/repl/ccac277ec864437a83fb7eae27168f99) - illustrates a simple approach to \"flicking\"\n\n## Build Instructions ##\n\nYou may easily build this package yourself.\n\nJust install [NPM](https://docs.npmjs.com/) according to the instructions for your platform and follow these steps:\n\n1. either clone this repository using [git](https://git-scm.com/) or [download a ZIP archive](https://github.com/rozek/svelte-drag-drop-touch/archive/refs/heads/main.zip) with its contents to your disk and unpack it there \n2. open a shell and navigate to the root directory of this repository\n3. run `npm install` in order to install the complete build environment\n4. execute `npm run build` to create a new build\n\nYou may also look into the author's [build-configuration-study](https://github.com/rozek/build-configuration-study) for a general description of his build environment.\n\n## License ##\n\n[MIT License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fsvelte-drag-drop-touch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Fsvelte-drag-drop-touch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fsvelte-drag-drop-touch/lists"}