{"id":27976867,"url":"https://github.com/mfuu/vue3-virtual-sortable","last_synced_at":"2026-02-01T08:09:53.565Z","repository":{"id":49846112,"uuid":"518352240","full_name":"mfuu/vue3-virtual-sortable","owner":"mfuu","description":"A virtual scrolling list component that can be sorted by dragging, for vue3","archived":false,"fork":false,"pushed_at":"2025-12-14T07:58:10.000Z","size":1719,"stargazers_count":52,"open_issues_count":5,"forks_count":12,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-12-16T11:12:31.455Z","etag":null,"topics":["big-data","bigdata","dnd","drag","drag-and-drop","draggable","drop","list","sort","sortable","virtual","virtual-list","vue3"],"latest_commit_sha":null,"homepage":"https://mfuu.github.io/vue3-virtual-sortable/","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/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}},"created_at":"2022-07-27T07:22:32.000Z","updated_at":"2025-12-14T07:57:02.000Z","dependencies_parsed_at":"2024-04-15T12:26:59.990Z","dependency_job_id":"5e15be76-5e7c-4144-bbb6-4d5d6c3e8c61","html_url":"https://github.com/mfuu/vue3-virtual-sortable","commit_stats":null,"previous_names":["mfuu/vue3-virtual-drag-list"],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/mfuu/vue3-virtual-sortable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue3-virtual-sortable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue3-virtual-sortable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue3-virtual-sortable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue3-virtual-sortable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfuu","download_url":"https://codeload.github.com/mfuu/vue3-virtual-sortable/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue3-virtual-sortable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28973267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T06:46:42.625Z","status":"ssl_error","status_checked_at":"2026-02-01T06:44:56.173Z","response_time":56,"last_error":"SSL_read: 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":["big-data","bigdata","dnd","drag","drag-and-drop","draggable","drop","list","sort","sortable","virtual","virtual-list","vue3"],"created_at":"2025-05-08T01:41:23.288Z","updated_at":"2026-02-01T08:09:53.558Z","avatar_url":"https://github.com/mfuu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-virtual-sortable\n\n[![npm](https://img.shields.io/npm/v/vue-virtual-sortable/next.svg)](https://www.npmjs.com/package/vue-virtual-sortable) [![npm](https://img.shields.io/npm/dm/vue-virtual-sortable.svg)](https://www.npmjs.com/package/vue-virtual-sortable) [![vue2](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)\n\nA virtual scrolling list component that can be sorted by dragging, support vue3\n\nIf you use vue with 2.x, see [here](https://github.com/mfuu/vue-virtual-sortable)\n\n### [Live demo](https://mfuu.github.io/vue3-virtual-sortable/)\n\n## Simple usage\n\n```bash\nnpm i vue-virtual-sortable@next\n```\n\nRoot component:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003c!--\n      :handle=\"'i'\" // use tagName \n      :handle=\"'.handle'\" // use class\n      :handle=\"'#handle'\" // use id\n    --\u003e\n    \u003cvirtual-list v-model=\"list\" dataKey=\"id\" handle=\"#handle\" style=\"height: 500px;\"\u003e\n      \u003ctemplate v-slot:item=\"{ record, index, dataKey }\"\u003e\n        \u003cdiv\u003e\n          \u003ci id=\"handle\" class=\"handle\"\u003ehandle\u003c/i\u003e\n          \u003cp\u003e{{ record.text }}\u003c/p\u003e\n        \u003c/div\u003e\n      \u003c/template\u003e\n      \u003ctemplate v-slot:header\u003e\n        \u003cdiv class=\"header\"\u003eheader\u003c/div\u003e\n      \u003c/template\u003e\n      \u003ctemplate v-slot:footer\u003e\n        \u003cdiv class=\"footer\"\u003efooter\u003c/div\u003e\n      \u003c/template\u003e\n    \u003c/virtual-list\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport VirtualList from 'vue-virtual-sortable';\n\nconst list = ref([\n  { id: '1', text: 'abc' },\n  { id: '2', text: 'def' },\n]);\n// const items = computed({\n//   get() {\n//     return list.value;\n//   },\n//   set(val) {\n//     list.value = val;\n//     console.log(val);\n//   }\n// })\n\u003c/script\u003e\n```\n\n## Emits\n\n| **Emit**      | **Description**                      |\n| ------------- | ------------------------------------ |\n| `top`         | Scrolled to top of scroll element    |\n| `bottom`      | Scrolled to bottom of scroll element |\n| `drag`        | Element dragging started             |\n| `drop`        | Element dragging is completed        |\n| `rangeChange` | List rendering range changed         |\n\n## Props\n\n### Required props\n\n| **Prop**   | **Type** | **Description**                                                       |\n| ---------- | -------- | --------------------------------------------------------------------- |\n| `v-model`  | `Array`  | The data that needs to be rendered                                    |\n| `data-key` | `String` | The unique identifier of each piece of data, in the form of `'a.b.c'` |\n\n### Optional props\n\n**Commonly used**\n\n| **Prop**       | **Type**                  | **Default** | **Description**                                                                 |\n| -------------- | ------------------------- | ----------- | ------------------------------------------------------------------------------- |\n| `keeps`        | `Number`                  | `30`        | The number of lines rendered by the virtual scroll                              |\n| `size`         | `Number`                  | `-`         | The estimated height of each piece of data, it will be automatically calculated |\n| `handle`       | `Function/String`         | `-`         | Drag handle selector within list items                                          |\n| `group`        | `Object/String`           | `-`         | Set value to allow drag between different lists                                 |\n| `direction`    | `vertical \\| horizontal`  | `vertical`  | Scroll direction                                                                |\n| `scroller`     | `Document \\| HTMLElement` | `-`         | Virtual list scrolling element                                                  |\n| `lockAxis`     | `x \\| y`                  | `-`         | Axis on which dragging will be locked                                           |\n| `tableMode`    | `Boolean`                 | `false`     | Display with table and tbody                                                    |\n| `keepOffset`   | `Boolean`                 | `false`     | When scrolling up to load data, keep the same offset as the previous scroll     |\n| `debounceTime` | `Number`                  | `0`         | Scroll debounce time                                                            |\n| `throttleTime` | `Number`                  | `0`         | Scroll throttle time                                                            |\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| `disabled`           | `Boolean` | `false`                 | Disables the sortable if set to true                          |\n| `sortable`           | `Boolean` | `true`                  | Whether the current list can be sorted by dragging            |\n| `draggable`          | `String`  | `[role=\"item\"]`         | Specifies which items inside the element should be draggable. |\n| `animation`          | `Number`  | `150`                   | Animation speed moving items when sorting                     |\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`                  | Whether to trigger the drop event when the animation ends     |\n| `rootTag`            | `String`  | `div`                   | Label type for root element                                   |\n| `wrapTag`            | `String`  | `div`                   | Label type for list wrap element                              |\n| `wrapClass`          | `String`  | `''`                    | Class name for list wrap element                              |\n| `wrapStyle`          | `Object`  | `{}`                    | Style object for list wrap element                            |\n| `ghostClass`         | `String`  | `''`                    | Class name for the mask element when dragging                 |\n| `ghostStyle`         | `Object`  | `{}`                    | Style object for 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 size of the current item by unique key value       |\n| `getOffset()`                 | Get the current scroll height                              |\n| `getClientSize()`             | Get wrapper element client viewport size (width or height) |\n| `getScrollSize()`             | Get all scroll size (scrollHeight or scrollWidth)          |\n| `scrollToTop()`               | Scroll to top of list                                      |\n| `scrollToBottom()`            | Scroll to bottom of list                                   |\n| `scrollToKey(key, align)`     | Scroll to the specified data-key position                  |\n| `scrollToIndex(index, align)` | Scroll to the specified index position                     |\n| `scrollToOffset(offset)`      | Scroll to the specified offset                             |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Fvue3-virtual-sortable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfuu%2Fvue3-virtual-sortable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Fvue3-virtual-sortable/lists"}