ngx-virtual-dnd 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -42
- package/fesm2022/ngx-virtual-dnd.mjs +410 -346
- package/fesm2022/ngx-virtual-dnd.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ngx-virtual-dnd.d.ts +5 -9
package/README.md
CHANGED
|
@@ -28,7 +28,6 @@ import {
|
|
|
28
28
|
DroppableGroupDirective,
|
|
29
29
|
DraggableDirective,
|
|
30
30
|
DragPreviewComponent,
|
|
31
|
-
PlaceholderComponent,
|
|
32
31
|
DropEvent,
|
|
33
32
|
moveItem,
|
|
34
33
|
} from 'ngx-virtual-dnd';
|
|
@@ -39,18 +38,13 @@ import {
|
|
|
39
38
|
DroppableGroupDirective,
|
|
40
39
|
DraggableDirective,
|
|
41
40
|
DragPreviewComponent,
|
|
42
|
-
PlaceholderComponent,
|
|
43
41
|
],
|
|
44
42
|
template: `
|
|
45
43
|
<!-- Item template -->
|
|
46
|
-
<ng-template #itemTpl let-item
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
<div class="item" vdndDraggable="{{ item.id }}" [vdndDraggableData]="item">
|
|
51
|
-
{{ item.name }}
|
|
52
|
-
</div>
|
|
53
|
-
}
|
|
44
|
+
<ng-template #itemTpl let-item>
|
|
45
|
+
<div class="item" [vdndDraggable]="item.id" [vdndDraggableData]="item">
|
|
46
|
+
{{ item.name }}
|
|
47
|
+
</div>
|
|
54
48
|
</ng-template>
|
|
55
49
|
|
|
56
50
|
<!-- Lists wrapped in a group -->
|
|
@@ -144,49 +138,35 @@ For maximum control, use individual components instead of `VirtualSortableListCo
|
|
|
144
138
|
@Component({
|
|
145
139
|
imports: [
|
|
146
140
|
VirtualScrollContainerComponent,
|
|
141
|
+
DroppableGroupDirective,
|
|
147
142
|
DroppableDirective,
|
|
148
143
|
DraggableDirective,
|
|
149
144
|
DragPreviewComponent,
|
|
150
|
-
PlaceholderComponent,
|
|
151
145
|
],
|
|
152
146
|
template: `
|
|
153
|
-
<
|
|
154
|
-
<
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
147
|
+
<ng-template #itemTpl let-item>
|
|
148
|
+
<div class="item" [vdndDraggable]="item.id" [vdndDraggableData]="item">
|
|
149
|
+
{{ item.name }}
|
|
150
|
+
</div>
|
|
151
|
+
</ng-template>
|
|
152
|
+
|
|
153
|
+
<div vdndGroup="demo">
|
|
154
|
+
<div vdndDroppable="list-1" (drop)="onDrop($event)">
|
|
155
|
+
<vdnd-virtual-scroll
|
|
156
|
+
droppableId="list-1"
|
|
157
|
+
[items]="items()"
|
|
158
|
+
[itemHeight]="50"
|
|
159
|
+
[itemIdFn]="getItemId"
|
|
160
|
+
[trackByFn]="trackById"
|
|
161
|
+
[itemTemplate]="itemTpl"
|
|
162
|
+
/>
|
|
163
|
+
</div>
|
|
162
164
|
</div>
|
|
163
165
|
<vdnd-drag-preview />
|
|
164
166
|
`,
|
|
165
167
|
})
|
|
166
168
|
export class ListComponent {
|
|
167
|
-
readonly #dragState = inject(DragStateService);
|
|
168
169
|
items = signal<Item[]>([]);
|
|
169
|
-
|
|
170
|
-
// Keep dragged item rendered during scroll
|
|
171
|
-
stickyIds = computed(() => {
|
|
172
|
-
const item = this.#dragState.draggedItem();
|
|
173
|
-
return item ? [item.draggableId] : [];
|
|
174
|
-
});
|
|
175
|
-
|
|
176
|
-
// Insert placeholder into list
|
|
177
|
-
itemsWithPlaceholder = computed(() => {
|
|
178
|
-
const items = this.items();
|
|
179
|
-
const activeDroppable = this.#dragState.activeDroppableId();
|
|
180
|
-
const placeholderIndex = this.#dragState.placeholderIndex();
|
|
181
|
-
|
|
182
|
-
if (activeDroppable !== 'list-1' || placeholderIndex === null) {
|
|
183
|
-
return items;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
const result = [...items];
|
|
187
|
-
result.splice(placeholderIndex, 0, { id: 'placeholder', isPlaceholder: true } as any);
|
|
188
|
-
return result;
|
|
189
|
-
});
|
|
190
170
|
}
|
|
191
171
|
```
|
|
192
172
|
|