{"id":16132934,"url":"https://github.com/mfuu/ngx-virtual-dnd-list","last_synced_at":"2025-03-18T15:30:42.103Z","repository":{"id":112541148,"uuid":"536926823","full_name":"mfuu/ngx-virtual-dnd-list","owner":"mfuu","description":"A virtual scrolling list component that can be sorted by dragging","archived":false,"fork":false,"pushed_at":"2025-01-18T13:47:59.000Z","size":79,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-14T07:16:57.645Z","etag":null,"topics":["angular","big-data","bigdata","dnd","drag","drag-and-drop","draggable","drop","list","ngx","sort","sortable","virtual","virtual-list"],"latest_commit_sha":null,"homepage":"","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-09-15T08:10:37.000Z","updated_at":"2025-02-05T07:48:07.000Z","dependencies_parsed_at":"2024-06-13T12:22:21.858Z","dependency_job_id":"87834468-91f9-4a93-8870-754938394115","html_url":"https://github.com/mfuu/ngx-virtual-dnd-list","commit_stats":null,"previous_names":["mfuu/ngx-virtual-dnd-list"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fngx-virtual-dnd-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fngx-virtual-dnd-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fngx-virtual-dnd-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fngx-virtual-dnd-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfuu","download_url":"https://codeload.github.com/mfuu/ngx-virtual-dnd-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243933438,"owners_count":20370986,"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":["angular","big-data","bigdata","dnd","drag","drag-and-drop","draggable","drop","list","ngx","sort","sortable","virtual","virtual-list"],"created_at":"2024-10-09T22:35:18.497Z","updated_at":"2025-03-18T15:30:42.097Z","avatar_url":"https://github.com/mfuu.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Scroll"],"readme":"# ngx-virtual-dnd-list\n\n[![npm](https://img.shields.io/npm/v/ngx-virtual-dnd-list.svg)](https://www.npmjs.com/package/ngx-virtual-dnd-list) [![npm](https://img.shields.io/npm/dm/ngx-virtual-dnd-list.svg)](https://www.npmjs.com/package/ngx-virtual-dnd-list) [![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/ngx-virtual-dnd-list/)\n\n## Simple usage\n\n```bash\nnpm i ngx-virtual-dnd-list\n```\n\n**`virutal-list.module.ts`**\n\n```ts\n...\nimport { VirtualDndListModule } from 'ngx-virtual-dnd-list';\n\n@NgModule({\n  declarations: [\n    ...\n  ],\n  imports: [\n    ...\n    VirtualDndListModule\n  ],\n  providers: []\n})\nexport class VirtualListModule { }\n```\n\n**`virutal-list.component.ts`**\n\n```ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'virutal-list',\n  template: `\n    \u003cdiv #scroller\u003e\n      \u003cdiv\n        virtual-dnd-list\n        [scroller]=\"scroller\"\n        [dataKey]=\"'id'\"\n        [keeps]=\"30\"\n        [(ngModel)]=\"list\"\n        (ngModelChange)=\"onChange($event)\"\n      \u003e\n        \u003cng-template let-item let-index=\"index\"\u003e\n          \u003cdiv class=\"list-item\"\u003e\n            \u003cspan\u003e{{ index }}\u003c/span\u003e\n            \u003cp\u003e{{ item.text }}\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/ng-template\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  `,\n  styles: [],\n})\nexport class AppComponent {\n  public list = [\n    { id: 'a', text: 'aaa' },\n    { id: 'b', text: 'bbb' },\n    { id: 'c', text: 'ccc' },\n    ...\n  ];\n\n  onChange(data) {\n    // the data changes after the dragging ends\n  }\n}\n\n```\n\n## EventEmitters\n\n| **Event**     | **Description**                  |\n| ------------- | -------------------------------- |\n| `onTop`       | scrolled to top                  |\n| `onBottom`    | scrolled to bottom               |\n| `onDrag`      | the drag is started              |\n| `onDrop`      | the drag is completed            |\n| `rangeChange` | triggered when the range changes |\n\n## Attributes\n\n### Required Attributes\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| `scroller` | `HTMLElement \\| Document` | Virtual list scrolling element                                        |\n\n### Optional Attributes\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`          | `-`         | string: 'name' or object: `{ name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false }`  |\n| `direction`    | `vertical \\| horizontal` |             | scroll direction                                                                                                  |\n| `lockAxis`     | `x \\| y`                 | `-`         | Axis on which dragging will be locked                                                                             |\n| `tableMode`    | `Boolean`                | `false`     | Using Virtual Lists in Tabular Mode                                                                               |\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| `wrapper`          | `HTMLElement` | `-`                      | Virtual list wrapper                                                                                                           |\n| `sortable`         | `Boolean`     | `true`                   | Allow Sorting by Dragging                                                                                                      |\n| `draggable`        | `String`      | `.virtual-dnd-list-item` | Specifies which items inside the element should be draggable. If does not set a value, the default list element can be dragged |\n| `itemClass`        | `String`      | `virtual-dnd-list-item`  | Default 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| `ghostClass`       | `String`      | `''`                     | The class of the mask element when dragging                                                                                    |\n| `ghostStyle`       | `Object`      | `{}`                     | The style of the mask element when dragging                                                                                    |\n| `chosenClass`      | `String`      | `''`                     | The class of the selected element when dragging                                                                                |\n| `placeholderClass` | `String`      | `''`                     | Class name for the drop placeholder                                                                                            |\n\n\u003e If a page has multiple virtual lists and the virtual lists are in the top-down structure, transfer the wrapper to avoid the situation that the page cannot be dragged.\n\n## Public 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\n**Usage**\n\n```ts\nimport { Component, ViewChild } from '@angular/core';\nimport { VirtualDndListComponent } from 'ngx-virtual-dnd-list';\n\n@Component({\n  selector: 'virutal-list',\n  template: `\n    \u003cdiv #scroller\u003e\n      \u003cvirtual-dnd-list\n        #virtualList\n        ...\n      \u003e\n        ...\n      \u003c/virtual-dnd-list\u003e\n    \u003c/div\u003e\n    \u003cbutton (click)=\"scrollToBottom()\"\u003escroll to bottom\u003c/button\u003e\n  `,\n  styles: [],\n})\nexport class VirtualListComponent {\n  @ViewChild('virtualList') virtualList: VirtualDndListComponent;\n\n  scrollToBottom() {\n    this.virtualList.scrollToBottom();\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Fngx-virtual-dnd-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfuu%2Fngx-virtual-dnd-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Fngx-virtual-dnd-list/lists"}