diff --git a/pdb-js/src/app/customizable-grid/customizable-grid.component.html b/pdb-js/src/app/customizable-grid/customizable-grid.component.html index e2682ff..7e514fc 100644 --- a/pdb-js/src/app/customizable-grid/customizable-grid.component.html +++ b/pdb-js/src/app/customizable-grid/customizable-grid.component.html @@ -1,58 +1,110 @@ -
- - - - - drag_handle - -

{{card.title}}

- - - - - -
\ No newline at end of file +

Drag&Drop with a flex-wrap

+ + + + +
+ + + +
+
+
+
{{ item }}
+
+
diff --git a/pdb-js/src/app/customizable-grid/customizable-grid.component.ts b/pdb-js/src/app/customizable-grid/customizable-grid.component.ts index 2204554..6da1c2d 100644 --- a/pdb-js/src/app/customizable-grid/customizable-grid.component.ts +++ b/pdb-js/src/app/customizable-grid/customizable-grid.component.ts @@ -1,111 +1,119 @@ -import { Component, QueryList, ViewChildren } from '@angular/core'; -import {CdkDragDrop, CdkDragEnter, CdkDropList, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop'; +import { Component } from '@angular/core'; +import { CdkDragEnter, CdkDropList, moveItemInArray, DragRef} from '@angular/cdk/drag-drop'; +import { AfterViewInit } from '@angular/core'; +import { ViewChild } from '@angular/core'; -const COLORS = [ - '#ea4335', - '#4285f4', - '#fbbc04', - '#34a853', - '#fa7b17', - '#f538a0', - '#a142f4', - '#24c1e0', - '#9aa0a6', - '#5195ea', - '#e25142', - '#f5c518', - '#41af6a', - '#f6aea9', - '#a50e0e', - '#aecbfa', - '#174ea6', - '#fde293', - '#a8dab5', - '#0d652d', - '#fdc69c', - '#fba9d6', - '#c92786', - '#d7aefb', - '#8430ce', - '#a1e4f2', - '#007b83', - '#e8eaed', - '#b9d4f6', - '#f3b9b3', - '#fbe7a2', - '#b3dfc3', -] - -function getColor() { - return COLORS[Math.floor(Math.random() * 32)]; -} @Component({ selector: 'app-customizable-grid', templateUrl: './customizable-grid.component.html' }) -export class CustomizableGridComponent { - entered($event: CdkDragEnter) { - console.log($event.item.data, $event.container.data); - moveItemInArray(this.cards, $event.item.data, $event.container.data); - } - entered2($event: CdkDragEnter) { - console.log($event.item.data, $event.container.data); - moveItemInArray(this.cards, $event.item.data, $event.container.data); - } +export class CustomizableGridComponent implements AfterViewInit { + @ViewChild(CdkDropList) placeholder!: CdkDropList; - drop(event: CdkDragDrop) { - - } + private target: CdkDropList|null = null; + private targetIndex: number = 0; + private source: CdkDropList|null = null; + private sourceIndex: number = 0; + private dragRef: DragRef|null = null; - done(){ + items: Array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; - } - - @ViewChildren(CdkDropList) dropsQuery!: QueryList; - - drops!: CdkDropList[]; + boxWidth = '200px'; + boxHeight = '200px'; ngAfterViewInit() { - this.dropsQuery.changes.subscribe(() => { - this.drops = this.dropsQuery.toArray() - }) - Promise.resolve().then(() => { - this.drops = this.dropsQuery.toArray(); - console.log(this.drops); - }) + const placeholderElement = this.placeholder.element.nativeElement; + + placeholderElement.style.display = 'none'; + placeholderElement.parentNode!.removeChild(placeholderElement); } - /** Based on the screen size, switch from standard to one column per row */ - cards = [ - { title: 'Card 1', cols: 2, rows: 2, color: getColor()}, - { title: 'Card 2', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 3', cols: 3, rows: 1, color: getColor() }, - { title: 'Card 4', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 5', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 6', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 7', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 8', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 9', cols: 1, rows: 3, color: getColor() }, - { title: 'Card 10', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 11', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 12', cols: 2, rows: 1, color: getColor() }, - { title: 'Card 13', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 14', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 15', cols: 1, rows: 2, color: getColor() }, - { title: 'Card 16', cols: 2, rows: 1, color: getColor() }, - { title: 'Card 17', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 18', cols: 2, rows: 1, color: getColor() }, - { title: 'Card 19', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 20', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 21', cols: 1, rows: 1, color: getColor()}, - /* { title: 'Card 22', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 23', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 24', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 25', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 26', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 27', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 28', cols: 1, rows: 1, color: getColor() }, - { title: 'Card 29', cols: 1, rows: 1, color: getColor() } */ - ]; + add() { + this.items.push(this.items.length + 1); + } + + shuffle() { + this.items.sort(function () { + return 0.5 - Math.random(); + }); + } + + onDropListDropped() { + if (!this.target) { + return; + } + + const placeholderElement: HTMLElement = + this.placeholder.element.nativeElement; + const placeholderParentElement: HTMLElement = + placeholderElement.parentElement!; + + placeholderElement.style.display = 'none'; + + placeholderParentElement.removeChild(placeholderElement); + placeholderParentElement.appendChild(placeholderElement); + placeholderParentElement.insertBefore( + this.source!.element.nativeElement, + placeholderParentElement.children[this.sourceIndex] + ); + + if (this.placeholder._dropListRef.isDragging() && this.dragRef != null) { + this.placeholder._dropListRef.exit(this.dragRef); + } + + this.target = null; + this.source = null; + this.dragRef = null; + + if (this.sourceIndex !== this.targetIndex) { + moveItemInArray(this.items, this.sourceIndex, this.targetIndex); + } + } + + onDropListEntered({ item, container }: CdkDragEnter) { + if (container == this.placeholder) { + return; + } + + const placeholderElement: HTMLElement = + this.placeholder.element.nativeElement; + const sourceElement: HTMLElement = item.dropContainer.element.nativeElement; + const dropElement: HTMLElement = container.element.nativeElement; + const dragIndex: number = Array.prototype.indexOf.call( + dropElement.parentElement!.children, + this.source ? placeholderElement : sourceElement + ); + const dropIndex: number = Array.prototype.indexOf.call( + dropElement.parentElement!.children, + dropElement + ); + + if (!this.source) { + this.sourceIndex = dragIndex; + this.source = item.dropContainer; + + placeholderElement.style.width = this.boxWidth + 'px'; + placeholderElement.style.height = this.boxHeight + 40 + 'px'; + + sourceElement.parentElement!.removeChild(sourceElement); + } + + this.targetIndex = dropIndex; + this.target = container; + this.dragRef = item._dragRef; + + placeholderElement.style.display = ''; + + dropElement.parentElement!.insertBefore( + placeholderElement, + dropIndex > dragIndex ? dropElement.nextSibling : dropElement + ); + + this.placeholder._dropListRef.enter( + item._dragRef, + item.element.nativeElement.offsetLeft, + item.element.nativeElement.offsetTop + ); + } }