Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ngx-virtual-dnd-list
Advanced tools
Readme
A virtual scrolling list component that can be sorted by dragging
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
}
}
Event | Description |
---|---|
onTop | scrolled to top |
onBottom | scrolled to bottom |
onDrag | the drag is started |
onDrop | the drag is completed |
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 |
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 |
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();
}
}
FAQs
A virtual scrolling list component that can be sorted by dragging
The npm package ngx-virtual-dnd-list receives a total of 2 weekly downloads. As such, ngx-virtual-dnd-list popularity was classified as not popular.
We found that ngx-virtual-dnd-list demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.