ngx-virtual-dnd-list
TypeScript icon, indicating that this package has built-in type declarations

13.0.2 • Public • Published

ngx-virtual-dnd-list

npm npm Software License

A virtual scrolling list component that can be sorted by dragging

Simple usage

npm i ngx-virtual-dnd-list

virutal-list.module.ts

...
import { VirtualDndListModule } from 'ngx-virtual-dnd-list';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    VirtualDndListModule
  ],
  providers: []
})
export class VirtualListModule {}

virutal-list.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'virutal-list',
  template: `
    <div #scroller>
      <virtual-dnd-list
        [scroller]="scroller"
        [dataKey]="'id'"
        [keeps]="30"
        [(ngModel)]="list"
        (ngModelChange)="onChange($event)"
      >
        <ng-template let-data let-index>
          <span>{{ data.index }}</span>
          <p>{{ data.id }}</p>
        </ng-template>
      </virtual-dnd-list>
    </div>
  `,
  styles: [],
})
export class AppComponent {
  public list = [
    { id: 'a', text: 'aaa' },
    { id: 'b', text: 'bbb' },
    { id: 'c', text: 'ccc' },
    ...
  ];

  onChange(data) {
    // the data changes after the dragging ends
  }
}

EventEmitters

Event Description
onTop scrolled to top
onBottom scrolled to bottom
onDrag the drag is started
onDrop the drag is completed

Attributes

Required Attributes

Prop Type Description
data-key String The unique identifier of each piece of data, in the form of 'a.b.c'
scroller HTMLElement | Document Virtual list scrolling element

Optional Attributes

Commonly used

Prop Type Default Description
keeps Number 30 The number of lines rendered by the virtual scroll
size Number - The estimated height of each piece of data, you can choose to pass it or not, it will be automatically calculated
handle Function/String - Drag handle selector within list items
group Object/String - string: 'name' or object: { name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false }
keepOffset Boolean false When scrolling up to load data, keep the same offset as the previous scroll
direction vertical | horizontal scroll direction
lockAxis x | y - Axis on which dragging will be locked
debounceTime Number 0 debounce time on scroll
throttleTime Number 0 throttle time on scroll

Uncommonly used

Prop Type Default Description
draggable String - Specifies which items inside the element should be draggable. If does not set a value, the default list element can be dragged
sortable Boolean true Allow Sorting by Dragging
disabled Boolean false Disables the sortable if set to true
animation Number 150 Animation speed moving items when sorting
autoScroll Boolean true Automatic scrolling when moving to the edge of the container
scrollThreshold Number 55 Threshold to trigger autoscroll
delay Number 0 Time in milliseconds to define when the sorting should start
delayOnTouchOnly Boolean false Only delay on press if user is using touch
fallbackOnBody Boolean false Appends the ghost element into the document's body
ghostClass String '' The class of the mask element when dragging
ghostStyle Object {} The style of the mask element when dragging
chosenClass String '' The class of the selected element when dragging

Public Methods

Method Description
getSize(key) Get the size of the current item by unique key value
getOffset() Get the current scroll height
getClientSize() Get wrapper element client viewport size (width or height)
getScrollSize() Get all scroll size (scrollHeight or scrollWidth)
scrollToTop() Scroll to top of list
scrollToBottom() Scroll to bottom of list
scrollToIndex(index) Scroll to the specified index position
scrollToOffset(offset) Scroll to the specified offset

Usage

import { Component, ViewChild } from '@angular/core';
import { VirtualDndListComponent } from 'ngx-virtual-dnd-list';

@Component({
  selector: 'virutal-list',
  template: `
    <div #scroller>
      <virtual-dnd-list
        #virtualList
        ...
      >
        ...
      </virtual-dnd-list>

      <button (click)="scrollToBottom()">scroll to bottom</button>
    </div>
  `,
  styles: [],
})
export class VirtualListComponent {
  @ViewChild('virtualList') virtualList: VirtualDndListComponent;

  scrollToBottom() {
    this.virtualList.scrollToBottom();
  }
}

Package Sidebar

Install

npm i ngx-virtual-dnd-list

Weekly Downloads

4

Version

13.0.2

License

MIT

Unpacked Size

268 kB

Total Files

18

Last publish

Collaborators

  • mfuu