{"id":42500588,"url":"https://github.com/mfuu/svelte-virtual-sortable","last_synced_at":"2026-02-06T18:12:57.033Z","repository":{"id":332927304,"uuid":"665024382","full_name":"mfuu/svelte-virtual-sortable","owner":"mfuu","description":"A virtual scrolling list component that can be sorted by dragging","archived":false,"fork":false,"pushed_at":"2026-01-28T12:34:46.000Z","size":950,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-29T02:18:29.971Z","etag":null,"topics":["draggable","list","sort","sortable","svelte","virtual","virtual-list","virtual-scroll"],"latest_commit_sha":null,"homepage":"https://mfuu.github.io/svelte-virtual-sortable/","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/mfuu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-07-11T09:15:25.000Z","updated_at":"2026-01-28T12:34:14.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/mfuu/svelte-virtual-sortable","commit_stats":null,"previous_names":["mfuu/svelte-virtual-sortable"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mfuu/svelte-virtual-sortable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fsvelte-virtual-sortable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fsvelte-virtual-sortable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fsvelte-virtual-sortable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fsvelte-virtual-sortable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfuu","download_url":"https://codeload.github.com/mfuu/svelte-virtual-sortable/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fsvelte-virtual-sortable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28974246,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T08:16:14.655Z","status":"ssl_error","status_checked_at":"2026-02-01T08:06:51.373Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["draggable","list","sort","sortable","svelte","virtual","virtual-list","virtual-scroll"],"created_at":"2026-01-28T13:05:22.476Z","updated_at":"2026-02-01T09:01:27.536Z","avatar_url":"https://github.com/mfuu.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-virtual-sortable\n\n[![npm](https://img.shields.io/npm/v/svelte-virtual-sortable.svg)](https://www.npmjs.com/package/svelte-virtual-sortable) [![npm](https://img.shields.io/npm/dm/svelte-virtual-sortable.svg)](https://www.npmjs.com/package/svelte-virtual-sortable) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)\n\nA virtual scrolling list component that can be sorted by dragging\n\n### [Live Demo](https://mfuu.github.io/svelte-virtual-sortable/)\n\n## Simple Usage\n\n```bash\nnpm i svelte-virtual-sortable\n```\n\nRoot component:\n\n```svelte\n\u003cscript\u003e\n  import VirtualList from 'svelte-virtual-sortable';\n\n  let items = [{id: '1', text: 'a'}, {id: '2', text: 'b'}, ...];\n\n  function onDrop(event) {\n    console.log('onDrop', event);\n    items = event.list;\n  }\n\u003c/script\u003e\n\n\u003cVirtualList dataSource={items} dataKey=\"id\" handle=\".handle\" style={{ height: '500px' }} {onDrop}\u003e\n  {#snippet item({ item, index, key })}\n    \u003cspan class=\"handle\"\u003e☰\u003c/span\u003e\n    \u003cp\u003e{item.desc}\u003c/p\u003e\n  {/snippet}\n\u003c/VirtualList\u003e\n```\n\n## Snippets\n\n- item - Snippet for each item in the list\n  - Parameters\n    - `item` - The item data\n    - `index` - The index of the item\n    - `key` - The unique identifier of the item\n- header - Snippet for the elements that should appear at the top of the list\n- footer - Snippet for the elements that should appear at the bottom of the list\n\n## Props\n\n**Callback**\n\n| **Emit**        | **Type**   | **Description**                         |\n| --------------- | ---------- | --------------------------------------- |\n| `onTop`         | `Function` | Scrolling to the top of the scroller    |\n| `onBottom`      | `Function` | Scrolling to the bottom of the scroller |\n| `onDrag`        | `Function` | Drag is started                         |\n| `onDrop`        | `Function` | Drag is complete                        |\n| `onRangeChange` | `Function` | Range of visible items has changed      |\n\n**Required props**\n\n| **Prop**     | **Type** | **Default** | **Description**                                                       |\n| ------------ | -------- | ----------- | --------------------------------------------------------------------- |\n| `dataKey`    | `String` | -           | The unique identifier of each piece of data, in the form of `'a.b.c'` |\n| `dataSource` | `Array`  | `[]`        | The data that needs to be rendered                                    |\n\n**Common used**\n\n| **Prop**       | **Type**                  | **Default** | **Description**                                                                                                  |\n| -------------- | ------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- |\n| `size`         | `Number`                  | -           | Estimated height of each row. it will be automatically calculated                                                |\n| `keeps`        | `Number`                  | `30`        | The number of lines rendered by the virtual scroll                                                               |\n| `handle`       | `String`                  | -           | Drag handle selector within list items                                                                           |\n| `group`        | `Object/String`           | -           | string: 'name' or object: `{ name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false }` |\n| `scroller`     | `Document \\| HTMLElement` | -           | Virtual list scrolling element                                                                                   |\n| `direction`    | `vertical \\| horizontal`  | `vertical`  | Scroll direction                                                                                                 |\n| `debounceTime` | `Number`                  | `0`         | debounce time on scroll                                                                                          |\n| `throttleTime` | `Number`                  | `0`         | debounce time on scroll                                                                                          |\n| `tableMode`    | `Boolean`                 | `false`     | display with table and tbody                                                                                     |\n\n**Uncommonly used**\n\n| **Prop**             | **Type**  | **Default**             | **Description**                                                             |\n| -------------------- | --------- | ----------------------- | --------------------------------------------------------------------------- |\n| `buffer`             | `Number`  | `Math.round(keeps / 3)` | Buffer size to detect range change                                          |\n| `draggable`          | `String`  | `[role=\"item\"]`         | Specifies which items inside the element should be draggable                |\n| `sortable`           | `Boolean` | `true`                  | Whether the current list can be sorted by dragging                          |\n| `lockAxis`           | `x \\| y`  | `-`                     | Axis on which dragging will be locked                                       |\n| `keepOffset`         | `Boolean` | `false`                 | When scrolling up to load data, keep the same offset as the previous scroll |\n| `disabled`           | `Boolean` | `false`                 | Disables the sortable if set to true                                        |\n| `animation`          | `Number`  | `150`                   | Drag-and-drop's animation delay                                             |\n| `autoScroll`         | `Boolean` | `true`                  | Automatic scrolling when moving to the edge of the container                |\n| `scrollSpeed`        | `Object`  | `{ x: 10, y: 10 }`      | Vertical\u0026Horizontal scrolling speed (px)                                    |\n| `scrollThreshold`    | `Number`  | `55`                    | Threshold to trigger autoscroll                                             |\n| `delay`              | `Number`  | `0`                     | Time in milliseconds to define when the sorting should start                |\n| `delayOnTouchOnly`   | `Boolean` | `false`                 | Only delay on press if user is using touch                                  |\n| `appendToBody`       | `Boolean` | `false`                 | Appends the ghost element into the document's body                          |\n| `dropOnAnimationEnd` | `Boolean` | `true`                  | Drop item on animation end                                                  |\n| `rootTag`            | `String`  | `div`                   | Label type for root element                                                 |\n| `wrapTag`            | `String`  | `div`                   | Label type for list wrap element                                            |\n| `wrapStyle`          | `Object`  | `{}`                    | List wrapper element style                                                  |\n| `wrapClass`          | `String`  | `''`                    | List wrapper element class                                                  |\n| `itemTag`            | `String`  | `div`                   | Label type for list item element                                            |\n| `itemStyle`          | `Object`  | `{}`                    | List item element style                                                     |\n| `itemClass`          | `String`  | `''`                    | List item element class                                                     |\n| `ghostStyle`         | `Object`  | `{}`                    | The style of the mask element when dragging                                 |\n| `ghostClass`         | `String`  | `''`                    | The class of the mask element when dragging                                 |\n| `chosenClass`        | `String`  | `''`                    | Class name for the chosen item                                              |\n| `placeholderClass`   | `String`  | `''`                    | Class name for the drop placeholder                                         |\n\n## Methods\n\n| **Method**                    | **Description**                                            |\n| ----------------------------- | ---------------------------------------------------------- |\n| `getSize(key)`                | get the height of the specified item by key value          |\n| `getOffset()`                 | get the current scroll top/left                            |\n| `getClientSize()`             | Get wrapper element client viewport size (width or height) |\n| `getScrollSize()`             | Get all scroll size (scrollHeight or scrollWidth)          |\n| `scrollToTop()`               | scroll to the top of the list                              |\n| `scrollToBottom()`            | scroll to the bottom of the list                           |\n| `scrollToKey(key, align)`     | scroll to the specified data-key                           |\n| `scrollToIndex(index, align)` | scroll to the specified index value                        |\n| `scrollToOffset(offset)`      | scroll to the specified height                             |\n\n**Sample Usage**\n\n```svelte\n\u003cscript\u003e\n ...\n\n let virtualList;\n\n function scrollToBottom() {\n  virtualList.scrollToBottom();\n }\n\u003c/script\u003e\n\n\u003cbutton onclick={scrollToBottom}\u003eScroll to Bottom\u003c/button\u003e\n\n\u003cVirtualList bind:this={virtualList} ...\u003e...\u003c/VirtualList\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Fsvelte-virtual-sortable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfuu%2Fsvelte-virtual-sortable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Fsvelte-virtual-sortable/lists"}