{"id":14962693,"url":"https://github.com/rozek/svelte-agnostic-draggable","last_synced_at":"2025-10-25T00:30:35.275Z","repository":{"id":50383498,"uuid":"371589290","full_name":"rozek/svelte-agnostic-draggable","owner":"rozek","description":"jQuery UI interactions draggable/droppable/sortable for Svelte","archived":false,"fork":false,"pushed_at":"2023-07-12T07:24:43.000Z","size":164,"stargazers_count":26,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-06T10:09:59.136Z","etag":null,"topics":["draggable","droppable","jquery-ui","sortable","svelte-action","svelte3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-28T05:26:26.000Z","updated_at":"2024-09-25T09:52:52.000Z","dependencies_parsed_at":"2024-09-22T15:00:47.883Z","dependency_job_id":"419d2ba9-8ebc-449b-b69f-dff067739689","html_url":"https://github.com/rozek/svelte-agnostic-draggable","commit_stats":{"total_commits":92,"total_committers":2,"mean_commits":46.0,"dds":"0.010869565217391353","last_synced_commit":"1896ca54f118c29ead745d81425d58990a68184c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-agnostic-draggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-agnostic-draggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-agnostic-draggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-agnostic-draggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/svelte-agnostic-draggable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867387,"owners_count":16555891,"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":["draggable","droppable","jquery-ui","sortable","svelte-action","svelte3"],"created_at":"2024-09-24T13:30:22.999Z","updated_at":"2025-10-25T00:30:34.971Z","avatar_url":"https://github.com/rozek.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-agnostic-draggable #\n\n jQuery UI interactions draggable/droppable/sortable for Svelte\n\n~~**Important Notice: because of not yet merged (but important) bug fixes in the original [agnostic-draggable](https://github.com/marcospont/agnostic-draggable), this package currently uses a newer copy, namely [agnostic-draggable-bug-fixed](https://github.com/rozek/agnostic-draggable). Apart from these bug fixes, however, the original description still applies.**~~\n\n**NPM users**: please consider the [Github README](https://github.com/rozek/svelte-agnostic-draggable/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```\nnpm install svelte-agnostic-draggable\n```\n\n## Usage ##\n\nIt is recommended to import the package within a module context:\n\n```html\n\u003cscript context=\"module\"\u003e\n  import { draggable, droppable, sortable } from 'svelte-agnostic-draggable'\n\u003c/script\u003e\n\n\u003cscript\u003e\n  function EventHandler (Event) { ... } // just as an example\n\u003c/script\u003e\n\n\u003cdiv use:draggable={{ options }}\n  on:draggable:init={EventHandler} on:draggable:destroy={EventHandler}\n  on:drag:start={EventHandler} on:drag:move={EventHandler} on:drag:stop={EventHandler}\n\u003e...\u003c/div\u003e\n\n\u003cdiv use:droppable={{ options }}\n  on:droppable:init={EventHandler} on:droppable:destroy={EventHandler}\n  on:droppable:activate={EventHandler} on:droppable:deactivate={EventHandler}\n  on:droppable:over={EventHandler} on:droppable:out={EventHandler}\n  on:droppable:drop={EventHandler}\n\u003e...\u003c/div\u003e\n\n\u003cdiv use:sortable={{ options }}\n  on:sortable:init={EventHandler} on:sortable:destroy={EventHandler}\n  on:sortable:activate={EventHandler} on:sortable:deactivate={EventHandler}\n  on:sort:start={EventHandler} on:sort:move={EventHandler} on:sort:stop={EventHandler}\n  on:sortable:over={EventHandler} on:sortable:out={EventHandler}\n  on:sortable:change={EventHandler} on:sortable:update={EventHandler}\n  on:sortable:remove={EventHandler} on:sortable:receive={EventHandler}\n\u003e...\u003c/div\u003e\n```\n\n**Important Note for mobile Users**\n\nSince `agnostic-draggable` itself handles `MouseEvent`s only, you will presumably also need a module such as [svelte-touch-to-mouse](https://github.com/rozek/svelte-touch-to-mouse) which maps `TouchEvent`s to `MouseEvent`s. All examples for `svelte-agnostic-draggable` already use that module and may therefore also be used on smartphones and tablets.\n\n## Examples ##\n\nAll examples are available on the Svelte REPL - feel free to play with them!\n\nHere are some basic ones:\n\n* [Draggable](https://svelte.dev/repl/cc36f2c307d54b0081fd6a16c18d1b5f) (with Event Log - open the REPL console)\n* [Droppable](https://svelte.dev/repl/7c06b8b5b7594cb6b0593da8c8a38438) (with Event Log - open the REPL console)\n* [Sortable](https://svelte.dev/repl/91db405809614aa6943ce7fbac10664f) (with Event Log - open the REPL console)\n\nFor more detailled examples, see below.\n\n## Background Information ##\n\n`svelte-agnostic-draggable` is a thin wrapper around [agnostic-draggable](https://github.com/marcospont/agnostic-draggable) which makes jQuery UI-like interactions `draggable`, `droppable` and `sortable` available to web applications without any dependency for jQuery and jQuery UI.\n\nWith this wrapper, these interactions may now be used as \"[actions](https://svelte.dev/tutorial/actions)\" in Svelte components. For the available options and their format, please, consider the [documentation](https://github.com/marcospont/agnostic-draggable/blob/main/README.md) of the underlying library.\n\nThe wrapper itself is almost trivial, all the \"heavy lifting\" is done by `agnostic-draggable` - thus, credits primarily go to [Marcos Pont](https://github.com/marcospont).\n\n## More detailled Examples ##\n\nAll examples are available on the Svelte REPL.\n\n* **Draggable**\n  * [Draggable with Crosshairs](https://svelte.dev/repl/ff3b37f973964240b16b35af04b5e551) (uses coordinates from drag events)\u003cbr\u003e\u0026nbsp;\n  * [Line Node dragging](https://svelte.dev/repl/c7712ceeba1a4262a321c5ccfa9ee11b) (reposition the ends of a straight line)\n  * [Polygon Node dragging](https://svelte.dev/repl/61807a11b0a34688859c21b1e74a2edc) (reposition the nodes of a polygon)\n  * [quadratic Bezier Curve Node dragging](https://svelte.dev/repl/330f88cd9f1e4652bc30bacba8b7b0f6) (reposition the nodes of a quadratic bezier curve)\n  * [cubic Bezier Curve Node dragging](https://svelte.dev/repl/d6f8385e473b45078696e18883024513) (reposition the nodes of a cubic bezier curve)\u003cbr\u003e\u0026nbsp;\n  * [draggable Note](https://svelte.dev/repl/f60141d0fd714f7eac2888c6e5a4bfd4) (uses a drag handle)\n  * [draggable resizable Note](https://svelte.dev/repl/cfd1b8c9faf94ad5b7ca035a21f4dbd1) (with an invisible \"helper\")\u003cbr\u003eWarning: right now, \"draggable\" does not seem to expect a draggable object to change its size after initial setup - this causes \"containment\" not to behave as desired. As a workaround, you may simply control positioning of resizable draggables in the same way as this example controls the draggable's size.\u003cbr\u003e\u0026nbsp;\n  * [draggable Button](https://svelte.dev/repl/4b21916c71de442ab326e22b37d8d6a4) (combines clicking and dragging)\u003cbr\u003e\u0026nbsp;\n  * [ResizeHandles](https://svelte.dev/repl/eff4aa19f1c2484a917e34d98a4a3870) (implements a typical resize frame with handles)\u003cbr\u003e\u0026nbsp;\n  * [Slider](https://svelte.dev/repl/f9e65134155045d49ca1813beadd3d8c) (a simple linear slider)\n  * [Dial](https://svelte.dev/repl/60f9cd8be0bc4fb488626f08c8600d70) (a simple dial to visually choose an angle)\n* **Droppable**\n  * [Circle, Triangle, Star](https://svelte.dev/repl/c6659a04c47e47bfbdfec1f10c0fc9f7) (drag shapes to where they belong)\n* **Sortable**\n  * basic [Sortable](https://svelte.dev/repl/91db405809614aa6943ce7fbac10664f) example\u003cbr\u003ethis example also uses the [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock) package from [Will](https://github.com/willmcpo) in order to avoid the annoying body scrolling effect when trying to rearrange list items.\n  * [Sortable with Handles](https://svelte.dev/repl/827260baeeea47dc8911c2b25a4c6ce9) (as preferred on mobile platforms)\u003cbr\u003e\u0026nbsp;\n  * [List sort with feedback](https://svelte.dev/repl/24da936731744dfdbe6f11db266bcd68) (updates Svelte's list model after sorting)\u003cbr\u003eWarning: \"sortable\"s do not properly handle \"revert\" right now...\n  * [two-dimensional List Layout](https://svelte.dev/repl/d334429573834201b2135d54f46cd5fa) (lists don't necessarily have to look like columns)\u003cbr\u003e\u0026nbsp;\n  * [move Items between Sortables](https://svelte.dev/repl/130d2b76ee514f9c8ea94408bae0759a)\n  * [drag new item into a Sortable](https://svelte.dev/repl/b977894e19a948bc9a271e13905f5955) (a bit tricky due to bug workarounds)\n\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-agnostic-draggable/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-agnostic-draggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Fsvelte-agnostic-draggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fsvelte-agnostic-draggable/lists"}