Incorporated the drag and drop feature following a tutorial on YouTube
Using *ngFor to create divs from the existing roomsFloorZone array, my goal now is to generate divs with style attributes based on values received from the backend response within the same *ngFor loop. All divs, whether from roomsFloorZone or backend response, should be contained under the same parent div.
I have experimented with the existing elements in roomsFloorZone.
import {Component, OnInit, AfterViewInit, Input, SimpleChange,
SimpleChanges} from '@angular/core';
@Component({
selector: 'floor-zone',
templateUrl: './floorzone.component.html',
styleUrls: ['./floorzone.component.scss']
})
export class FloorZoneComponent{
urlFloorZoneIn: any;
roomsFloorZoneIn: any;
@Input() urlFloorZone;
@Input() roomsFloorZone;
@Input() currentBoxFloorZone;
ngOnChanges(changes: SimpleChanges) {
if (changes.urlFloorZone && changes.urlFloorZone.currentValue) {
this.urlFloorZoneIn = changes.urlFloorZone.currentValue;
}
if (changes.roomsFloorZone && changes.roomsFloorZone.currentValue) {
this.roomsFloorZoneIn = changes.roomsFloorZone.currentValue
}
}
dropzone1 = [];
currentBox?: string = this.currentBoxFloorZone;
move(box: string, toList: string[]): void {
box = this.currentBoxFloorZone;
this.removeBox(box, this.roomsFloorZoneIn);
this.removeBox(box, this.dropzone1);
toList.push(box);
}
removeBox(item: string, list) {
if (list.indexOf(item) !== -1) {
list.splice(list.indexOf(item), 1);
}
}
}
Utilizing an existing array roomsFloorZoneIn for dragging and dropping elements in the following HTML where *ngfor is operational:
HTML
<div id="toget" class="dropzone" [ngStyle]="{'width':'100%','background-
image': 'url('+urlFloorZoneIn+')','background-repeat': 'no-repeat',
'background-position': 'center', 'background-size': '100% 100%',
'border':'1px solid black', 'height':'340px'}" appMovableArea
appDropzone (drop)="move(currentBox, dropzone1)">
<div class="box" *ngFor="let box of dropzone1" appDroppable
(dragStart)="currentBox = box" appMovable>
{{ box.dis }}
</div>
</div>
The aim is to assign style (transform attribute) and either "abc" or "def" to {{box.dis}} extracted from the code snippet below: [Have both style and node values readily available] and apply it to the *ngFor loop to position the div elements accordingly
`<div xmlns="http://www.w3.org/1999/xhtml">
<!--bindings={
"ng-reflect-ng-for-of": ""
}-->
<div _ngcontent-c5="" appdroppable="" appmovable=""
class="box draggable movable ng-star-inserted" touch-action="none"
style="transform: translateX(183.2%) translateY(56%);"> abc
<span _ngcontent-c5="">X</span>
</div>
<div _ngcontent-c5="" appdroppable="" appmovable=""
class="box draggable movable ng-star-inserted" touch-action="none"
style="transform: translateX(183.2%) translateY(56%);"> def
<span _ngcontent-c5="">X</span>
</div>
</div>`
Therefore, the *ngFor loop should cater to existing elements (roomsFloorZoneIn) and allow for the insertion of additional elements fetched from the backend (using their respective style attributes and node values). Please note: The necessary style and node values are already accessible