{"id":22389483,"url":"https://github.com/joaquimnetocel/svelte-sortable-items","last_synced_at":"2025-07-31T07:32:32.082Z","repository":{"id":80675793,"uuid":"605500625","full_name":"joaquimnetocel/svelte-sortable-items","owner":"joaquimnetocel","description":"svelte-sortable-items is a svelte/sveltekit package to create sortable drag-and-drop items. This package allows you to relate a javascript array to sortable HTML elements.","archived":false,"fork":false,"pushed_at":"2023-07-04T14:42:43.000Z","size":213,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-25T12:22:41.100Z","etag":null,"topics":["drag-and-drop","reorder","reordering","sortable-lists","sortable-table","svelte","sveltekit","table-sorting"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/svelte-sortable-items","language":"Svelte","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/joaquimnetocel.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":"2023-02-23T09:40:15.000Z","updated_at":"2024-08-19T22:37:51.282Z","dependencies_parsed_at":null,"dependency_job_id":"2e550cfd-16ec-4d33-b250-194606d2a2e0","html_url":"https://github.com/joaquimnetocel/svelte-sortable-items","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"0b17811d46496e118e7af13106e939be8d5615da"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joaquimnetocel%2Fsvelte-sortable-items","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joaquimnetocel%2Fsvelte-sortable-items/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joaquimnetocel%2Fsvelte-sortable-items/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joaquimnetocel%2Fsvelte-sortable-items/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joaquimnetocel","download_url":"https://codeload.github.com/joaquimnetocel/svelte-sortable-items/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228224726,"owners_count":17887844,"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-and-drop","reorder","reordering","sortable-lists","sortable-table","svelte","sveltekit","table-sorting"],"created_at":"2024-12-05T03:12:02.723Z","updated_at":"2025-07-31T07:32:32.073Z","avatar_url":"https://github.com/joaquimnetocel.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-sortable-items\n\n![GITHUB VERSION](https://img.shields.io/github/package-json/v/joaquimnetocel/svelte-sortable-items?label=github%20version\u0026logo=github\u0026color=lightgray) ![NPM VERSION](https://img.shields.io/npm/v/svelte-sortable-items?color=red\u0026logo=npm\u0026label=npm%20version) ![NPM Downloads](https://img.shields.io/npm/dw/svelte-sortable-items?color=red\u0026label=npm%20downloads\u0026logo=npm) ![NPM License](https://img.shields.io/npm/l/svelte-sortable-items?color) [![Twitter](https://img.shields.io/twitter/follow/:twitterHandle.svg?style=social\u0026label=@joaquimnetocel)](https://twitter.com/joaquimnetocel)\n\nsvelte-sortable-items is a svelte/sveltekit package to create sortable drag-and-drop items. This package allows you to relate a javascript array to sortable HTML elements.\n\n\u003cp style=\"display:flex;align-items:center;justify-content:center;gap:30px;\"\u003e\n  \u003cimg alt='TABLE' src=\"./table.gif\" /\u003e\n  \u003cimg alt='SKELETON' src=\"./skeleton.gif\" /\u003e\n\u003c/p\u003e\n\n## VERSIONS\n\n- VERSION 1.0.0 OR ABOVE WORKS WITH SVELTE 5 ONLY (NEWER AND RECOMMENDED VERSIONS WITH IMPROVEMENTS!)\n- PREVIOUS VERSIONS WORKS WITH SVELTE 3, 4 AND 5.\n\n## WHY ANOTHER SVELTE PACKAGE FOR SORTING?\n\n**svelte-sorting-items** differs from other svelte sorting packages by not committing to a specific html structure (like \"ul/li\" lists). Furthermore, it promotes sorting from the child elements only, instead of sorting the children of a parent element. This allows a non-opinionated structure/styling and, consequently, the ordering of more flexible structures, such as the lines of a table for example.\n\n## FEATURES\n\n- NON-OPINIONATED STYLING.\n- NON-OPINIONATED HTML STRUCTURE.\n- WORKS ON MOBILE. YOU JUST HAVE TO LOAD [svelte-drag-drop-touch](https://github.com/rozek/svelte-drag-drop-touch)\n- TYPESCRIPT SUPPORT.\n\n## DEMOS\n\n- [REPL: BOOTSTRAP 5 TABLE EXAMPLE](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACu1VXW_bNhT9K5w2IAlgiU0dd5siGXNirXUaW4vtpRiqPtASLbGRSIKknDmC_vtAfUXW1pc9DnsxzHsPz-U95D0qjD1JsTTsz4VBUYYN25hxbowMdeR6IQ84VdgYGZLlItQRR4aCcAVSRGM3MJQMjGlAA0UyzoQCBViyA16EjI7AhgmFdileKJyBEuwFy8BZzWjKJmcShTN5dn1CsU8JH2yAiJIMKVwhaaBSrIBUSOHfJRYSuOCHanX-WScDVQAS2eByBHRTNji7Ywk9GwEUYxtcTUA56sPedrAlEk8tbDwewMY9Nopki5u8G-Cu-nTHFvZjC_tycX3SwAd2wAJHlUhdG-alRjmwFlsLTJ1aCDvBKKoUd74zTbCcffTAYgs--euPwF-BpX-zuPfA3Htc3HobYJo1tLk0KUI3MBKluLQhzCl_iq2QZbC5lEig2IwE46ZieZgExrR_gqpgS6hr3_j-drNdz37ryqSEPtVSJALve6XCiFpfZYRTchAWxQpSnsEdY0oqgfgvE-uN9RZGRCoYSvmasDJCrVDKwKhZBU7dwJDqmGKZYKzaOKEKx4Koo84maPzTlek9brYPqzFEL1y8v5zRbPwwj_nd_SL7eYXYmz9eLl9U-LB9_lXyaHycv5s8siTheX7rZ_ezzdfbljoUTEomSEyoGxiIMnrMWN6cCJ7q4sDBHVEnIgcQpkhKNzD4n-ZVMy06Pl36jx7YfvDAdnZz74G1_2kDtj5Ye_567q1tB2pQ_dydalg6pnpVD5BUgnAcgWcT5Yo1_HpH91Dqpej-V8mpA1UyCK1mS-8fwrP3p1EHdmQ6_lrGUTsWHTtc8T1GYdIfUyRBmAuBqdLrEaB5tsPiluVUYQHOezmLRBdl_xgCNA5gV-5QKWFXv80AucXfx8l1T0uUvc40aXSyDpTTt6zTVKB2hEY2F4zPkUJNtaqtcojUIM2wqmq7xekZvsnbO3q7c9jSYPN0yOW07gs04Ya8YLe4nJQADhuF_U5PVYEDWf6DMhX9l6bNuvxfnm_Jg-J_r07PKQJVQG0HZWccnVc4sCJrrY5Pi7uNv7K0sdGY7I_nryJdlA7kldO23uhUX4OKx-rbASjqQjsUPsWC5TQyQ5YyYYOUxInapTm-bhy-Dj8nRNWhsnLyhtYYGRmLyJ7gyLCVyHH5pfwLBn1atDYJAAA=)\n- [REPL: BASIC EXAMPLE](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACnWSW2-bQBCF_8p0W8m2BEa5tRIBpDRBipPYSLabPoQ8rGGNV4FdtDu4chH_veKWYEd9Qdqdbw8z50xJtjxlmtgvJRE0Y8QmN3lODIKHvD7oPUuREYNoWaiovnF0pHiOkFKRuCFBHRIvFCHyLJcKoYS53LNZJIUBK6mQblI2Q5ZBBVslMxi1iqbuaiZHlunR9ZHENuX5yQOLCp5RZA0pQkwZgkaK7JdmSoML35rT-KUuhlgCj204M6AeyobRg9yJkQE0YTZcXkFlDLHzd2xO1VuPXVycYBcDNUF1z119P-Euh3KHHvvRY6-T66MB7uWeKRY3JvVjOKLINkx5Y_Osph2rNb02WjitIfaO0bhx3vlimjC_efRhtobfwfIRggXMg5-zJx_u_OfZrb8C02zRLjytIjckO8Rc25ZViPwtmUYys7pwYkUTM1YyN1EW0S4k3rCD5oeNoGOd9CKc3JsHzz6s731w-k2AXMl8xf8ytzw7r8DyYHYbLGAdwNIPlnf-Evwnf-4v1qupY-WNTvmV0Wg3TJhqiAqlmMD6bEDr0K0sBDIF40FtyuNJ1fQZ8z10e2PXO-W1MTnDxWyvQqx7rM-LRtctj_SrntpwEds1ekeRuuVHf5-JQa695mne3SOvf9s0HKVUa7v5dujnh-C67rED1btIiP83_oMph4bV6_o-gGPFfN87ZQ2tasPvyqVVJ1R1oZcPq2Ax1ai4SPj2MP4wZlL1mToaDylrRKbD8aBsf7ah0VuiZCFiM5KpVDakPNnhJi3YdUt01392HNurqtnBTpYYJJMx33IWExtVwarX6h-goru64AQAAA==)\n\n## INSTALLATION\n\n```bash\nnpm install svelte-sortable-items\n```\n\n## BASIC EXAMPLE\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { MoveIcon, SortableItem } from 'svelte-sortable-items';\n\timport { flip } from 'svelte/animate';\n\n\tlet stateUsers = $state([\n\t\t{ id: 1, name: 'John', age: 45 },\n\t\t{ id: 2, name: 'Mark', age: 33 },\n\t\t{ id: 3, name: 'Jonas', age: 56 },\n\t\t{ id: 4, name: 'Mary', age: 76 },\n\t]);\n\tlet stateHoveredItem = $state\u003cnumber\u003e(-1);\n\u003c/script\u003e\n\n\u003csvelte:head\u003e\n\t\u003c!-- MAKE IT WORK ON MOBILE DEVICES --\u003e\n\t\u003cscript src=\"https://unpkg.com/svelte-drag-drop-touch\"\u003e\u003c/script\u003e\n\t\u003c!----\u003e\n\u003c/svelte:head\u003e\n\n\u003cp\u003eMOVE THE \u003cMoveIcon propSize={12} /\u003e ICON TO REORDER ELEMENTS.\u003c/p\u003e\n\n{#each stateUsers as currentUser, numberCounter (currentUser.id)}\n\t\u003cdiv animate:flip\u003e\n\t\t\u003cSortableItem\n\t\t\tpropItemNumber={numberCounter}\n\t\t\tbind:propData={stateUsers}\n\t\t\tbind:propHoveredItemNumber={stateHoveredItem}\n\t\t\u003e\n\t\t\t\u003cdiv class:classHovered={stateHoveredItem === numberCounter}\u003e\n\t\t\t\t\u003cMoveIcon propSize={12} /\u003e\n\t\t\t\t{currentUser.name}\n\t\t\t\u003c/div\u003e\n\t\t\u003c/SortableItem\u003e\n\t\u003c/div\u003e\n{/each}\n\n\u003cp\u003e{JSON.stringify(stateUsers)}\u003c/p\u003e\n\n\u003cstyle\u003e\n\t.classHovered {\n\t\tbackground-color: lightblue;\n\t\tcolor: white;\n\t}\n\u003c/style\u003e\n```\n\n## MORE EXAMPLES\n\nTo run the examples from `/src/routes`:\n\n```bash\ngit clone https://github.com/joaquimnetocel/svelte-sortable-items.git\ncd svelte-sortable-items\nnpm install\nnpm run dev\n```\n\n## COMPONENT STRUCTURE\n\n- `SortableItem`: A component to create sortable html elements.\n- `MoveIcon`: An icon commonly used to sort items.\n\n## PROPS\n\n- PROPS OF `SortableItem`:\n\n| PROP                               | DESCRIPTION                                                                   | TYPE        | REQUIRED | DEFAULT     |\n| ---------------------------------- | ----------------------------------------------------------------------------- | ----------- | -------- | ----------- |\n| `propData` (bindable)              | AN ARRAY WITH THE DATA.                                                       | `unknown[]` | YES      | -           |\n| `propItemNumber`                   | THE INITIAL POSITION OF THE ITEM.                                             | `number`    | YES      | `undefined` |\n| `propHoveredItemNumber` (bindable) | THE HOVERED ITEM NUMBER (GENERALY USED TO DO SPECIFIC STYLING WHEN HOVERING). | `number`    | NO       | `-1`        |\n| `propIsImageHidden` | MAKE THE GHOST IMAGE WHEN DRAGGING TRANSPARENT | `boolean`    | NO       | `false`        |\n\n- PROPS OF `MoveIcon`:\n\n| PROP       | DESCRIPTION           | TYPE     | REQUIRED | DEFAULT |\n| ---------- | --------------------- | -------- | -------- | ------- |\n| `propSize` | SIZE OF THE SORT ICON | `number` | NO       | 12      |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoaquimnetocel%2Fsvelte-sortable-items","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoaquimnetocel%2Fsvelte-sortable-items","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoaquimnetocel%2Fsvelte-sortable-items/lists"}