{"id":16132923,"url":"https://github.com/mfuu/vue-virtual-drag-list","last_synced_at":"2025-04-05T21:06:13.613Z","repository":{"id":39825903,"uuid":"426122545","full_name":"mfuu/vue-virtual-drag-list","owner":"mfuu","description":"A virtual scrolling list component that can be sorted by dragging","archived":false,"fork":false,"pushed_at":"2024-12-25T14:55:58.000Z","size":3547,"stargazers_count":40,"open_issues_count":10,"forks_count":12,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T20:03:20.040Z","etag":null,"topics":["big-data","bigdata","dnd","drag","drag-and-drop","draggable","drop","list","sort","sortable","virtual","virtual-list","vue"],"latest_commit_sha":null,"homepage":"https://mfuu.github.io/vue-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":"2021-11-09T06:54:04.000Z","updated_at":"2025-03-27T09:24:05.000Z","dependencies_parsed_at":"2024-01-16T12:49:43.068Z","dependency_job_id":"22ab82d0-5f98-40e0-9783-d6d4c2f403e6","html_url":"https://github.com/mfuu/vue-virtual-drag-list","commit_stats":{"total_commits":219,"total_committers":6,"mean_commits":36.5,"dds":"0.22374429223744297","last_synced_commit":"1b1b78498fa7257daf7872288347f12f30723c62"},"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue-virtual-drag-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue-virtual-drag-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue-virtual-drag-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fvue-virtual-drag-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfuu","download_url":"https://codeload.github.com/mfuu/vue-virtual-drag-list/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399871,"owners_count":20932876,"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","vue"],"created_at":"2024-10-09T22:35:15.649Z","updated_at":"2025-04-05T21:06:13.593Z","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.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-2.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\n\nFor Vue 3 support, see [here](https://github.com/mfuu/vue3-virtual-drag-list)\n\n### [Live demo](https://mfuu.github.io/vue-virtual-drag-list/)\n\n## Simple usage\n\n```bash\nnpm i vue-virtual-draglist\n```\n\nRoot component:\n\n```vue\n\u003ctemplate\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\" :data-key=\"'id'\" :handle=\"'.handle'\"\u003e\n    \u003ctemplate slot=\"item\" slot-scope=\"{ record, index, dataKey }\"\u003e\n      \u003cdiv\u003e\n        \u003cspan class=\"handle\"\u003e{{ record.id }}\u003c/span\u003e\n        \u003cp\u003e{{ record.text }}\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/template\u003e\n    \u003ctemplate slot=\"header\"\u003e\n      \u003cdiv class=\"header\"\u003eheader\u003c/div\u003e\n    \u003c/template\u003e\n    \u003ctemplate slot=\"footer\"\u003e\n      \u003cdiv class=\"footer\"\u003efooter\u003c/div\u003e\n    \u003c/template\u003e\n  \u003c/virtual-list\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport virtualList from 'vue-virtual-draglist';\n\nexport default {\n  name: 'root',\n  components: { virtualList },\n  data () {\n    return {\n      list: [{ id: '1', text: 'a' }, { id: '2', text: 'b' }, ...];\n    }\n  },\n}\n\u003c/script\u003e\n```\n\n## Emits\n\n| **Emit**      | **Description**    |\n| ------------- | ------------------ |\n| `top`         | scrolled to top    |\n| `bottom`      | scrolled to bottom |\n| `drag`        | drag is started    |\n| `drop`        | drag is completed  |\n| `rangeChange` | 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    | 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`        | `Function/String`         | `-`         | string: 'name' or object: `{ 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`         | debounce time on scroll                                                                                           |\n| `throttleTime` | `Number`                  | `0`         | throttle time on scroll                                                                                           |\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\nUse \u003ccode\u003e\u003ca href=\"https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements\"\u003eref\u003c/a\u003e\u003c/code\u003e to get the method inside the component\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%2Fvue-virtual-drag-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfuu%2Fvue-virtual-drag-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Fvue-virtual-drag-list/lists"}