{"id":15064395,"url":"https://github.com/tarb/svelte-dnd-list","last_synced_at":"2025-04-10T12:15:00.830Z","repository":{"id":46092899,"uuid":"495885897","full_name":"tarb/svelte-dnd-list","owner":"tarb","description":"Simple and lightweight Svelte Drag and Drop library","archived":false,"fork":false,"pushed_at":"2023-01-16T06:40:20.000Z","size":870,"stargazers_count":49,"open_issues_count":6,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T11:07:39.062Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Svelte","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/tarb.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}},"created_at":"2022-05-24T15:37:56.000Z","updated_at":"2024-10-22T03:42:18.000Z","dependencies_parsed_at":"2023-02-10T01:25:22.380Z","dependency_job_id":null,"html_url":"https://github.com/tarb/svelte-dnd-list","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarb%2Fsvelte-dnd-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarb%2Fsvelte-dnd-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarb%2Fsvelte-dnd-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tarb%2Fsvelte-dnd-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tarb","download_url":"https://codeload.github.com/tarb/svelte-dnd-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248217083,"owners_count":21066633,"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":[],"created_at":"2024-09-25T00:17:08.525Z","updated_at":"2025-04-10T12:15:00.808Z","avatar_url":"https://github.com/tarb.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Dnd List\n\nA very lightweight, dependency free and simple drag and drop library for Svelte. The library supports multiple types of lists, and moving items between lists.\n\n\u003e It's still currently in development and as such its API is not stable and might change as development continues.\n\n## Getting Started\n\nInstall through npm with:\n\n```terminal\nnpm i svelte-dnd-list\n```\n\nBelow is a very simple example that shows reordering an array of numbers in a vertical list. [You can play with this example here.](https://tarb.github.io/svelte-dnd-list/simple)\n\n```svelte\n\u003csvelte:options immutable={true} /\u003e\n\n\u003cscript lang=\"ts\"\u003e\n\timport DragDropList, { VerticalDropZone, reorder, type DropEvent } from 'svelte-dnd-list';\n\n\tlet items = [1, 2, 3, 4, 5];\n\n\tfunction onDrop({ detail: { from, to } }: CustomEvent\u003cDropEvent\u003e) {\n\t\tif (!to || from === to) {\n\t\t\treturn;\n\t\t}\n\n\t\titems = reorder(items, from.index, to.index);\n\t}\n\u003c/script\u003e\n\n\u003ch1\u003eSvelte Dnd List - Simple Example\u003c/h1\u003e\n\n\u003cDragDropList\n\tid=\"example\"\n\ttype={VerticalDropZone}\n\titemSize={50}\n\titemCount={items.length}\n\ton:drop={onDrop}\n\tlet:index\n\u003e\n\t\u003cdiv\u003e{items[index]}\u003c/div\u003e\n\u003c/DragDropList\u003e\n\n\u003cstyle\u003e\n\tdiv {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 50px;\n\t\theight: 50px;\n\t\tborder: 1px solid black;\n\t}\n\u003c/style\u003e\n```\n\n## Examples\n\n- [Simple example](https://tarb.github.io/svelte-dnd-list/simple)\n- [Scrollable container example](https://tarb.github.io/svelte-dnd-list/scroll)\n- [Programatic control](https://tarb.github.io/svelte-dnd-list/programatic)\n- [Multiple lists, item morphing and programmatic moving.](https://tarb.github.io/svelte-dnd-list/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarb%2Fsvelte-dnd-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftarb%2Fsvelte-dnd-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarb%2Fsvelte-dnd-list/lists"}