{"id":16132946,"url":"https://github.com/mfuu/vue3-virtual-drag-list","last_synced_at":"2025-03-18T15:30:42.121Z","repository":{"id":49846112,"uuid":"518352240","full_name":"mfuu/vue3-virtual-drag-list","owner":"mfuu","description":"A virtual scrolling list component that can be sorted by dragging, for vue3","archived":false,"fork":false,"pushed_at":"2025-01-21T02:12:29.000Z","size":1622,"stargazers_count":43,"open_issues_count":5,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-16T21:11:49.888Z","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-drag-list/","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}},"created_at":"2022-07-27T07:22:32.000Z","updated_at":"2025-03-14T18:26:43.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-drag-list","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue3-virtual-drag-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue3-virtual-drag-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue3-virtual-drag-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue3-virtual-drag-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfuu","download_url":"https://codeload.github.com/mfuu/vue3-virtual-drag-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244249136,"owners_count":20422912,"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":["big-data","bigdata","dnd","drag","drag-and-drop","draggable","drop","list","sort","sortable","virtual","virtual-list","vue3"],"created_at":"2024-10-09T22:35:21.744Z","updated_at":"2025-03-18T15:30:42.111Z","avatar_url":"https://github.com/mfuu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-virtual-draglist\n\n[![npm](https://img.shields.io/npm/v/vue-virtual-draglist/next.svg)](https://www.npmjs.com/package/vue-virtual-draglist) [![npm](https://img.shields.io/npm/dm/vue-virtual-draglist.svg)](https://www.npmjs.com/package/vue-virtual-draglist) [![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-drag-list)\n\n### [Live demo](https://mfuu.github.io/vue3-virtual-drag-list/)\n\n## Simple usage\n\n```bash\nnpm i vue-virtual-draglist@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    \u003cVirtualList 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/VirtualList\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport VirtualList from 'vue-virtual-draglist';\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//     // trigger when drag state changed if you use with `v-model`\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| `data-key` | String              | The unique identifier of each piece of data, in the form of `'a.b.c'` |\n| `v-model`  | Array\\|`Ref\u003cArray\u003e` | The data that needs to be rendered                                    |\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, you can choose to pass it or not, it will be automatically calculated |\n| `handle`       | `Function/String`         | `-`         | Drag handle selector within list items                                                                            |\n| `group`        | `Object/String`           | `-`         | `' '` \\| `{ name: 'group', put: true\\|false, pull: true\\|false\\|'clone', revertDrag: true\\|false }`               |\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| `sortable`         | `Boolean` | `true`                   | Whether the current list can be sorted by dragging            |\n| `draggable`        | `String`  | `.virtual-dnd-list-item` | Specifies which items inside the element should be draggable. |\n| `itemClass`        | `String`  | `virtual-dnd-list-item`  | Default list item class                                       |\n| `disabled`         | `Boolean` | `false`                  | Disables the sortable if set to true                          |\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| `fallbackOnBody`   | `Boolean` | `false`                  | Appends the ghost element into the document's body            |\n| `rootTag`          | `String`  | `div`                    | Label type for root element                                   |\n| `wrapTag`          | `String`  | `div`                    | Label type for list wrap element                              |\n| `wrapClass`        | `String`  | `''`                     | List wrapper element class                                    |\n| `wrapStyle`        | `Object`  | `{}`                     | List wrapper element style                                    |\n| `ghostClass`       | `String`  | `''`                     | The class of the mask element when dragging                   |\n| `ghostStyle`       | `Object`  | `{}`                     | The style 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 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)`       | Scroll to the specified data-key position                  |\n| `scrollToIndex(index)`   | 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-drag-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfuu%2Fvue3-virtual-drag-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Fvue3-virtual-drag-list/lists"}