{"id":43221182,"url":"https://github.com/mfuu/ngx-virtual-sortable","last_synced_at":"2026-02-01T09:00:38.914Z","repository":{"id":112541148,"uuid":"536926823","full_name":"mfuu/ngx-virtual-sortable","owner":"mfuu","description":"A virtual scrolling list component that can be sorted by dragging","archived":false,"fork":false,"pushed_at":"2026-01-15T02:07:56.000Z","size":921,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-15T02:10:27.209Z","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":"https://mfuu.github.io/ngx-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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-09-15T08:10:37.000Z","updated_at":"2026-01-15T02:06:50.000Z","dependencies_parsed_at":"2026-01-15T02:10:41.804Z","dependency_job_id":null,"html_url":"https://github.com/mfuu/ngx-virtual-sortable","commit_stats":null,"previous_names":["mfuu/ngx-virtual-dnd-list","mfuu/ngx-virtual-sortable"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/mfuu/ngx-virtual-sortable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fngx-virtual-sortable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fngx-virtual-sortable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fngx-virtual-sortable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fngx-virtual-sortable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfuu","download_url":"https://codeload.github.com/mfuu/ngx-virtual-sortable/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fngx-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":["angular","big-data","bigdata","dnd","drag","drag-and-drop","draggable","drop","list","ngx","sort","sortable","virtual","virtual-list"],"created_at":"2026-02-01T09:00:38.288Z","updated_at":"2026-02-01T09:00:38.909Z","avatar_url":"https://github.com/mfuu.png","language":"TypeScript","readme":"# ngx-virtual-sortable\n\n[![npm](https://img.shields.io/npm/v/ngx-virtual-sortable.svg)](https://www.npmjs.com/package/ngx-virtual-sortable) [![npm](https://img.shields.io/npm/dm/ngx-virtual-sortable.svg)](https://www.npmjs.com/package/ngx-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/ngx-virtual-sortable/)\n\n## Simple usage\n\n```bash\nnpm i ngx-virtual-sortable\n```\n\n**`virutal-list.module.ts`**\n\n```ts\n...\nimport { VirtualListModule } from 'ngx-virtual-sortable';\n\n@NgModule({\n  declarations: [\n    ...\n  ],\n  imports: [\n    ...\n    VirtualListModule\n  ],\n  providers: []\n})\nexport class ListModule { }\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-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 of scroll element    |\n| `onBottom`      | Scrolled to bottom of scroll element |\n| `onDrag`        | Element dragging started             |\n| `onDrop`        | Element dragging is completed        |\n| `onRangeChange` | 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| `scroller` | `HTMLElement \\| Document` | Virtual list scrolling element                                        |\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`          | `-`         | 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| `buffer`             | `Number`      | `Math.round(keeps / 3)` | Buffer size to detect range change                           |\n| `sortable`           | `Boolean`     | `true`                  | Allow Sorting by Dragging                                    |\n| `draggable`          | `String`      | `[role=\"item\"]`         | Specifies which items inside the element should be draggable |\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| `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| `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## 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, align)`   | Scroll to the specified index position                     |\n| `scrollToOffset(offset, align)` | Scroll to the specified offset                             |\n\n**Usage**\n\n```ts\nimport { Component, ViewChild } from '@angular/core';\nimport { VirtualListComponent } from 'ngx-virtual-sortable';\n\n@Component({\n  selector: 'virutal-list',\n  template: `\n    \u003cdiv #scroller\u003e\n      \u003cvirtual-list\n        #virtualList\n        ...\n      \u003e\n        ...\n      \u003c/virtual-list\u003e\n    \u003c/div\u003e\n    \u003cbutton (click)=\"scrollToBottom()\"\u003escroll to bottom\u003c/button\u003e\n  `,\n  styles: [],\n})\nexport class ListComponent {\n  @ViewChild('virtualList') virtualList: VirtualListComponent;\n\n  scrollToBottom() {\n    this.virtualList.scrollToBottom();\n  }\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Fngx-virtual-sortable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfuu%2Fngx-virtual-sortable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Fngx-virtual-sortable/lists"}