{"id":14962723,"url":"https://github.com/jhubbardsf/svelte-sortablejs","last_synced_at":"2025-10-25T00:30:40.461Z","repository":{"id":37674037,"uuid":"487950040","full_name":"jhubbardsf/svelte-sortablejs","owner":"jhubbardsf","description":"Svelte wrapper for SortableJS","archived":false,"fork":false,"pushed_at":"2023-02-24T09:05:02.000Z","size":79,"stargazers_count":61,"open_issues_count":9,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-05-01T13:06:41.074Z","etag":null,"topics":["sortablejs","svelte","sveltekit"],"latest_commit_sha":null,"homepage":"https://svelte-sortablejs.netlify.app","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/jhubbardsf.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":"2022-05-02T18:30:57.000Z","updated_at":"2024-06-21T19:06:19.099Z","dependencies_parsed_at":"2024-06-21T19:16:13.052Z","dependency_job_id":null,"html_url":"https://github.com/jhubbardsf/svelte-sortablejs","commit_stats":{"total_commits":29,"total_committers":2,"mean_commits":14.5,"dds":"0.10344827586206895","last_synced_commit":"022ff47dcaf2a4f454c56aa56b1317e0d1818e03"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhubbardsf%2Fsvelte-sortablejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhubbardsf%2Fsvelte-sortablejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhubbardsf%2Fsvelte-sortablejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhubbardsf%2Fsvelte-sortablejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhubbardsf","download_url":"https://codeload.github.com/jhubbardsf/svelte-sortablejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867388,"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":["sortablejs","svelte","sveltekit"],"created_at":"2024-09-24T13:30:25.489Z","updated_at":"2025-10-25T00:30:40.095Z","avatar_url":"https://github.com/jhubbardsf.png","language":"Svelte","funding_links":["https://www.buymeacoffee.com/jhubbard","https://img.buymeacoffee.com/button-api/?text=Buy"],"categories":[],"sub_categories":[],"readme":"# `svelte-sortablejs`\n[![npm](https://img.shields.io/npm/v/@jhubbardsf/svelte-sortablejs?style=flat-square)](https://www.npmjs.com/package/@jhubbardsf/svelte-sortablejs)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@jhubbardsf/svelte-sortablejs?style=flat-square)](https://www.npmjs.com/package/@jhubbardsf/svelte-sortablejs)\n![Netlify](https://img.shields.io/netlify/17ccb8e4-9fc6-4654-802b-688c7cd125c3?style=flat-square)\n[![GitHub last commit](https://img.shields.io/github/last-commit/jhubbardsf/svelte-sortablejs?style=flat-square)](https://github.com/jhubbardsf/svelte-sortablejs)\n\u003ca href=\"https://www.buymeacoffee.com/jhubbard\"\u003e\u003cimg src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a coffee\u0026emoji=\u0026slug=jhubbard\u0026button_colour=FFDD00\u0026font_colour=000000\u0026font_family=Poppins\u0026outline_colour=000000\u0026coffee_colour=ffffff\" height=20 /\u003e\u003c/a\u003e\n\nUnofficial Svelte package for the SortableJS library.\n\n## Demo\n\nSee a live [`demo`](https://svelte-sortablejs.netlify.app/) on Netlify.\n\n## Quick Start\n\n1. Install with npm, pnpm, or yarn.\n\n    `npm i -D @jhubbardsf/svelte-sortablejs`\n\n2. Import SortableList from package.\n\n    `import { SortableList } from '@jhubbardsf/svelte-sortablejs'`;\n\n3. Use the SortableList component in your svelte file.\n\n    ```Svelte\n    \u003cSortableList\u003e\n        \u003cdiv\u003e List Item 1 \u003c/div\u003e\n        \u003cdiv\u003e List Item 2 \u003c/div\u003e\n        \u003cdiv\u003e List Item 3 \u003c/div\u003e\n    \u003c/SortableList\u003e\n    ```\n\n\n## Example Use\n\nLook in [`src/routes/index.svelte`](https://github.com/jhubbardsf/svelte-sortablejs/blob/master/src/routes/index.svelte) to see Svelte implementations of the [`SortableJS`](https://sortablejs.github.io/Sortable/) examples.\n\n\n## SortableList Props\n\nBelow is a list explaining the SortableList component parameters. All parameters are optional. Check out the official SortableJS [`github`](https://github.com/SortableJS/Sortable) for more in depth information on the parameters.\n\n\u003c!-- Generated Text Below  --\u003e\n---\n\n#### `multiDragClass` option\n\nType: string\n\nDefault Value: null\n\nAdd a multiDrag class. Automatically mounts the multiDrag Plugin, sets it to true and sets fallbackTolerance to 3.\n\n---\n\n#### `swapClass` option\n\nType: string\n\nDefault Value: null\n\nAdd a swap class. Automatically mounts the swap Plugin, sets it to true.\n\n---\n\n#### `group` option\n\nType: string | GroupOptions\n\nDefault Value:\n\n\"name\" OR { name: \"...\", pull: [true, false, 'clone', array], put: [true, false, array] }\n\n---\n\n#### `sort` option\n\nType: boolean\n\nDefault Value: true\n\nSorting inside list\n\n---\n\n#### `disabled` option\n\nType: boolean\n\nDefault Value: false\n\nDisables the sortable if set to true.\n\n---\n\n#### `store` option\n\nType: undefined\n\nDefault Value:\n\n---\n\n#### `handle` option\n\nType: string\n\nDefault Value:\n\nDrag handle selector within list items\n\n---\n\n#### `swapThreshold` option\n\nType: number\n\nDefault Value: 1\n\nThreshold of the swap zone. Must be between 0 and 1.\n\n---\n\n#### `invertSwap` option\n\nType: boolean\n\nDefault Value: false\n\nWill always use inverted swap zone if set to true.\n\n---\n\n#### `invertedSwapThreshold` option\n\nType: number\n\nDefault Value:\n\nThreshold of the inverted swap zone (will be set to swapThreshold value by default).\n\n---\n\n#### `removeCloneOnHide` option\n\nType: boolean\n\nDefault Value: true\n\nRemove the clone element when it is not showing, rather than just hiding it\n\n---\n\n#### `ghostClass` option\n\nType: string\n\nDefault Value: \"sortable-ghost\"\n\nClass name for the drop placeholder.\n\n---\n\n#### `chosenClass` option\n\nType: string\n\nDefault Value: \"sortable-chosen\"\n\nClass name for the chosen item.\n\n---\n\n#### `dragClass` option\n\nType: string\n\nDefault Value: \"sortable-drag\"\n\nClass name for the dragging item.\n\n---\n\n#### `ignore` option\n\nType: string\n\nDefault Value: \"a; img\"\n\nElements to ignore\n\n---\n\n#### `filter` option\n\nType: string | Function\n\nDefault Value:\n\nSelectors that do not lead to dragging (String or Function)\n\n---\n\n#### `preventOnFilter` option\n\nType: boolean\n\nDefault Value: true\n\n---\n\n#### `animation` option\n\nType: number\n\nDefault Value: 0\n\n---\n\n#### `easing` option\n\nType: string | function\n\nDefault Value:\n\nEasing for animation. Defaults to null. See https://easings.net/ for examples. For other possible values, see https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp\n\n---\n\n#### `dataIdAttr` option\n\nType: string\n\nDefault Value: \"data-id\"\n\nHTML attribute that is used by the `toArray()` method.\n\n---\n\n#### `delay` option\n\nType: number\n\nDefault Value: 0\n\nTime in milliseconds to define when the sorting should start\n\n---\n\n#### `delayOnTouchOnly` option\n\nType: boolean\n\nDefault Value: false\n\nWhether or not the delay should be applied only if the user is using touch (eg. on a mobile device). No delay will be applied in any other case.\n\n---\n\n#### `forceFallback` option\n\nType: boolean\n\nDefault Value: false\n\nIgnore the HTML5 DnD behaviour and force the fallback to kick in\n\n---\n\n#### `fallbackClass` option\n\nType: string\n\nDefault Value: \"sortable-fallback\"\n\nClass name for the cloned DOM Element when using forceFallback.\n\n---\n\n#### `fallbackOnBody` option\n\nType: boolean\n\nDefault Value: false\n\nAppends the cloned DOM Element into the Document's Body.\n\n---\n\n#### `fallbackTolerance` option\n\nType: number\n\nDefault Value: 0\n\nSpecify in pixels how far the mouse should move before it's considered as a drag.\n\n---\n\n#### `fallbackOffset` option\n\nType: { x: 0, y: 0 }\n\nDefault Value: { x: 0, y: 0 }\n\n---\n\n#### `emptyInsertThreshold` option\n\nType: number\n\nDefault Value: 5\n\nPixel distance mouse must be from empty sortable to insert drag element into it\n\n---\n\n#### `direction` option\n\nType: undefined\n\nDefault Value:\n\nDirection that the Sortable should sort in. Can be set to 'vertical', 'horizontal', or a function, which will be called whenever a target is dragged over. Must return 'vertical' or 'horizontal'. Leave blank to auto detect.\n\n---\n\n#### `touchStartThreshold` option\n\nType: undefined\n\nDefault Value:\n\nHow many pixels the point should move before cancelling a delayed drag event\n\n---\n\n#### `setData` option\n\nType: undefined\n\nDefault Value:\n\n---\n\n#### `draggable` option\n\nType: undefined\n\nDefault Value: null\n\nSpecifies which items inside the element should be draggable.\n\n---\n\n#### `onChoose` option\n\nType: fn(event: SortableEvent) =\u003e void\n\nDefault Value:\n\nElement is chosen\n\n---\n\n#### `onUnchoose` option\n\nType: fn(event: SortableEvent) =\u003e void\n\nDefault Value:\n\nElement is unchosen\n\n---\n\n#### `onStart` option\n\nType: fn(event: SortableEvent) =\u003e void\n\nDefault Value:\n\nElement dragging started\n\n---\n\n#### `onEnd` option\n\nType: fn(event: SortableEvent) =\u003e void\n\nDefault Value:\n\nElement dragging ended\n\n---\n\n#### `onAdd` option\n\nType: fn(event: SortableEvent) =\u003e void\n\nDefault Value:\n\nElement is dropped into the list from another list\n\n---\n\n#### `onUpdate` option\n\nType: fn(event: SortableEvent) =\u003e void\n\nDefault Value:\n\nChanged sorting within list\n\n---\n\n#### `onRemove` option\n\nType: fn(event: SortableEvent) =\u003e void\n\nDefault Value:\n\nElement is removed from the list into another list\n\n---\n\n#### `onFilter` option\n\nType: fn(event: SortableEvent) =\u003e void\n\nDefault Value:\n\nAttempt to drag a filtered element\n\n---\n\n#### `onSort` option\n\nType: fn(event: SortableEvent) =\u003e void\n\nDefault Value:\n\nCalled by any change to the list (add / update / remove)\n\n---\n\n#### `onClone` option\n\nType: fn(event: SortableEvent) =\u003e void\n\nDefault Value:\n\nCalled when creating a clone of element\n\n---\n\n#### `onMove` option\n\nType: fn(event: SortableEvent) =\u003e void\n\nDefault Value:\n\nEvent when you move an item in the list or between lists\n\n---\n\n#### `onChange` option\n\nType: fn(event: SortableEvent) =\u003e void\n\nDefault Value:\n\nCalled when dragging element changes position\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhubbardsf%2Fsvelte-sortablejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhubbardsf%2Fsvelte-sortablejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhubbardsf%2Fsvelte-sortablejs/lists"}