dropzone1数组的元素仅反映初始的top,left值,不反映最新的top,left值。
dropzone1
在draw()功能我推top&left值topLeft阵列,最后把它推到dropzone1阵列内move()的功能,初始top,left值被示出,但它不反映最新的电流top,left的值。
draw()
top
left
topLeft
move()
export class FloorZoneComponent { urlFloorZoneIn: any; roomsFloorZoneIn: any; existingDroppedItemZoneIn: any[] = []; @Input() urlFloorZone; @Input() roomsFloorZone; @Input() currentBoxFloorZone; @Input() existingDroppedItem: any[] = []; dropzone1 = []; currentBox?: string = this.currentBoxFloorZone; mouse = { x: null, y: null, down: false }; will_draw = false; left; top; topLeft = []; @ViewChild('parentparent') parentparent; @HostListener('mousedown', ['$event']) onMousedown(event) { this.mouse.down = true; } @HostListener('mouseup', ['$event']) onMouseup(event) { this.mouse.down = false; } documentMouseMove(e: MouseEvent) { // move logic if(!this.mouse.down) { return; } const container_rect = this.parentparent.nativeElement.getBoundingClientRect(); this.mouse.x = e.clientX - container_rect.left; this.mouse.y = e.clientY - container_rect.top; if(!this.will_draw) { requestAnimationFrame(this.draw.bind(this)); this.will_draw = true; } } draw() { this.will_draw = false; const { width, height} = this.parentparent.nativeElement.getBoundingClientRect(); const perc_x = this.mouse.x / width * 100; const perc_y = this.mouse.y / height * 100; // -5 to center (elem has its width set to 10%) console.log('left', (perc_x - 5) + '%'); this.left = perc_x - 5; this.topLeft = [] this.topLeft.push(this.left); // -5 to center (elem has its height set to 10%) console.log('top', (perc_y - 5) + '%'); this.top = perc_y - 5; this.topLeft.push(this.top) } 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 } if(changes.existingDroppedItem && changes.existingDroppedItem.currentValue){ this.existingDroppedItemZoneIn = changes.existingDroppedItem.currentValue; } } move(box: string, toList: string[]): void { box = this.currentBoxFloorZone; let objTemp:any = { pos:[] }; objTemp.dis = this.currentBoxFloorZone; for(var i=0; i < this.topLeft.length; i++){ objTemp.pos.push(this.topLeft[i]); } this.removeBox(box, this.dropzone1); toList.push(objTemp); } removeBox(item: string, list) { if (list.indexOf(item) !== -1) { list.splice(list.indexOf(item), 1); } } }
我通话move()功能和推动名和top,left值dropzone1数组
<div (mousemove)="documentMouseMove($event)" #parentparent> <div class="dropzone" (drop)="move(currentBox, dropzone1)"> <div class="box" *ngFor="let existingZone of existingDroppedItemZoneIn"> {{ existingZone.dis }} <span style="display: none">{{existingZone.left}}</span> <span style="display: none">{{existingZone.top}}</span> </div> <div class="box" *ngFor="let box of dropzone1" (dragStart)="currentBox = box"> {{ box.dis.dis }} <span style="display: none">{{box.pos[1]}}</span> <span style="display: none">{{box.pos[0]}}</span> </div> </div> </div>
我也可以登录最新top,left从价值在控制台draw() 的功能,但该*ngFor元素不反映最新的一个
*ngFor
添加stackblitz链接
在此链接问题中,这里是hello.component,我在其中分配top和left值,in draw()和move()函数。
现在,我已经提供了静态数组的框值app.component,然后将其推入dropzone1存在问题的hello.component中的数组。
app.component
我想我已经解决了这个问题,但是如果有人建议的话该如何解决。
因此,每当放一个新盒子时,该move()函数就会被调用
(drop)="move(currentBox, dropzone1)"
从其中top,left值被推到框属性和插值到视图。现在top,left值从何处进入,它们来topleft自由draw()函数创建的数组。
topleft
因此,最初的top,left价值被插入。但当相同的元素被再次拖则仅draw()函数被调用和top,left计算值,但没有得到推,因为move()当新的元素被删除功能只调用。
因此,如何将插值数据绑定到从draw()函数计算得出的top,left的最新值。请提出建议。
发生这种情况是因为move()仅当将块从 Gray区域之外移动时才调用your,但是draw()所有鼠标移动都调用了your 。
currentBox选择并移动位置时,您需要更新位置。
currentBox
draw() { const movingBlockIndex = (this.dropzone1.indexOf(this.currentBox)); if (movingBlockIndex > -1) { this.will_draw = false; const { width, height } = this.parentparent.nativeElement.getBoundingClientRect(); const perc_x = this.mouse.x / width * 100; const perc_y = this.mouse.y / height * 100; // -5 to center (elem has its width set to 10%) // console.log('left', (perc_x - 5) + '%'); this.left = perc_x - 5; this.topLeft = [] this.topLeft.push(this.left); // -5 to center (elem has its height set to 10%) // console.log('top', (perc_y - 5) + '%'); this.top = perc_y - 5; this.topLeft.push(this.top) this.dropzone1[movingBlockIndex].pos[0] = (perc_x - 5); this.dropzone1[movingBlockIndex].pos[1] = (perc_y - 5); } }