如果我去掉cdkDropList，检查器会移动并停留在我移动的位置。如果我添加cdkDropList，它会移动并返回到原始位置。我需要保留cdkDropList，以便能够获得event.contenter.data和event.previousContainer.data。如果有任何关于如何修复它的想法，我将不胜感激。
这是html代码
<div class="checkerboard-wrapper" cdkDropListGroup>
<div *ngFor="let item of items;let i=index">
<div id={{item.squareId}} class={{item.class}} cdkDropList [cdkDropListData]="item" (cdkDropListDropped)="drop($event)">
<div *ngIf="newGame" class="images">
<img loading="lazy" *ngIf="item.img" id={{i}} class="checkerImg" src={{item.img}} cdkDrag />
<div *cdkDragPlaceholder></div>
</div>
</div>
</div>
</div>
import { AfterViewInit, Component, OnInit, Input, ViewChildren, QueryList, Renderer2 } from '@angular/core';
import { CdkDragDrop, CdkDragEnd, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { BreakpointState } from '@angular/cdk/layout';
import { HideDirective } from '../../directives/hide.directive';
import { SharedService } from '../../services/shared.service';
import { ScreenService } from '../../services/screen.service';
@Component({
selector: 'app-checkerboard',
templateUrl: './checkerboard.component.html',
styleUrls: ['./checkerboard.component.css'],
})
export class CheckerboardComponent implements OnInit, AfterViewInit {
isBelowLg: boolean = false;
disabled: boolean = false;
newGame: boolean = false;
currentIndex;
previousIndex;
imgId: string;
@ViewChildren(HideDirective) hideDirectives!: QueryList<HideDirective>;
xPointerGrabPosition: number;
yPointerGrabPosition: number;
xPointerReleasePosition: number;
yPointerReleasePosition: number;
items: Array<any> = [
{ squareId: '1-1', id: '1', class: 'square checkerboard-square-red', img: '' },
{ squareId: '1-2', id: '2', class: 'square checkerboard-square-black', img: ' ../../assets/images/beige-checker-piece.svg' },
{ squareId: '1-3', id: '3', class: 'square checkerboard-square-red', img: '' },
{ squareId: '1-4', id: '4', class: 'square checkerboard-square-black', img: ' ../../assets/images/beige-checker-piece.svg' },
{ squareId: '1-5', id: '5', class: 'square checkerboard-square-red', img: '' },
{ squareId: '1-6', id: '6', class: 'square checkerboard-square-black', img: ' ../../assets/images/beige-checker-piece.svg' },
{ squareId: '1-7', id: '7', class: 'square checkerboard-square-red', img: '' },
{ squareId: '1-8', id: '8', class: 'square checkerboard-square-black', img: ' ../../assets/images/beige-checker-piece.svg' },
{ squareId: '2-1', id: '9', class: 'square checkerboard-square-black', img: ' ../../assets/images/beige-checker-piece.svg' },
{ squareId: '2-2', id: '10', class: 'square checkerboard-square-red', img: '' },
{ squareId: '2-3', id: '11', class: 'square checkerboard-square-black', img: ' ../../assets/images/beige-checker-piece.svg' },
{ squareId: '2-4', id: '12', class: 'square checkerboard-square-red', img: '' },
{ squareId: '2-5', id: '13', class: 'square checkerboard-square-black', img: ' ../../assets/images/beige-checker-piece.svg' },
{ squareId: '2-6', id: '14', class: 'square checkerboard-square-red', img: '' },
{ squareId: '2-7', id: '15', class: 'square checkerboard-square-black', img: '../../assets/images/beige-checker-piece.svg' },
{ squareId: '2-8', id: '16', class: 'square checkerboard-square-red', img: '' },
{ squareId: '3-1', id: '17', class: 'square checkerboard-square-red', img: '' },
{ squareId: '3-2', id: '18', class: 'square checkerboard-square-black', img: '../../assets/images/beige-checker-piece.svg' },
{ squareId: '3-3', id: '19', class: 'square checkerboard-square-red', img: '' },
{ squareId: '3-4', id: '20', class: 'square checkerboard-square-black', img: '../../assets/images/beige-checker-piece.svg' },
{ squareId: '3-5', id: '21', class: 'square checkerboard-square-red', img: '' },
{ squareId: '3-6', id: '22', class: 'square checkerboard-square-black', img: '../../assets/images/beige-checker-piece.svg' },
{ squareId: '3-7', id: '23', class: 'square checkerboard-square-red', img: '' },
{ squareId: '3-8', id: '24', class: 'square checkerboard-square-black', img: '../../assets/images/beige-checker-piece.svg' },
{ squareId: '4-1', id: '25', class: 'square checkerboard-square-black', img: '' },
{ squareId: '4-2', id: '26', class: 'square checkerboard-square-red', img: '' },
{ squareId: '4-3', id: '27', class: 'square checkerboard-square-black', img: '' },
{ squareId: '4-4', id: '28', class: 'square checkerboard-square-red', img: '' },
{ squareId: '4-5', id: '29', class: 'square checkerboard-square-black', img: '' },
{ squareId: '4-6', id: '30', class: 'square checkerboard-square-red', img: '' },
{ squareId: '4-7', id: '31', class: 'square checkerboard-square-black', img: '' },
{ squareId: '4-8', id: '32', class: 'square checkerboard-square-red', img: '' },
{ squareId: '5-1', id: '33', class: 'square checkerboard-square-red', img: '' },
{ squareId: '5-2', id: '34', class: 'square checkerboard-square-black', img: '' },
{ squareId: '5-3', id: '35', class: 'square checkerboard-square-red', img: '' },
{ squareId: '5-4', id: '36', class: 'square checkerboard-square-black', img: '' },
{ squareId: '5-5', id: '37', class: 'square checkerboard-square-red', img: '' },
{ squareId: '5-6', id: '38', class: 'square checkerboard-square-black', img: '' },
{ squareId: '5-7', id: '39', class: 'square checkerboard-square-red', img: '' },
{ squareId: '5-8', id: '40', class: 'square checkerboard-square-black', img: '' },
{ squareId: '6-1', id: '41', class: 'square checkerboard-square-black', img: '../../assets/images/gray-checker-piece.svg' },
{ squareId: '6-2', id: '42', class: 'square checkerboard-square-red', img: '' },
{ squareId: '6-3', id: '43', class: 'square checkerboard-square-black', img: '../../assets/images/gray-checker-piece.svg' },
{ squareId: '6-4', id: '44', class: 'square checkerboard-square-red', img: '' },
{ squareId: '6-5', id: '45', class: 'square checkerboard-square-black', img: '../../assets/images/gray-checker-piece.svg' },
{ squareId: '6-6', id: '46', class: 'square checkerboard-square-red', img: '' },
{ squareId: '6-7', id: '47', class: 'square checkerboard-square-black', img: '../../assets/images/gray-checker-piece.svg' },
{ squareId: '6-8', id: '48', class: 'square checkerboard-square-red', img: '' },
{ squareId: '7-1', id: '49', class: 'square checkerboard-square-red', img: '' },
{ squareId: '7-2', id: '50', class: 'square checkerboard-square-black', img: '../../assets/images/gray-checker-piece.svg' },
{ squareId: '7-3', id: '51', class: 'square checkerboard-square-red', img: '' },
{ squareId: '7-4', id: '52', class: 'square checkerboard-square-black', img: '../../assets/images/gray-checker-piece.svg' },
{ squareId: '7-5', id: '53', class: 'square checkerboard-square-red', img: '' },
{ squareId: '7-6', id: '54', class: 'square checkerboard-square-black', img: '../../assets/images/gray-checker-piece.svg' },
{ squareId: '7-7', id: '55', class: 'square checkerboard-square-red', img: '' },
{ squareId: '7-8', id: '56', class: 'square checkerboard-square-black', img: '../../assets/images/gray-checker-piece.svg' },
{ squareId: '8-1', id: '57', class: 'square checkerboard-square-black', img: '../../assets/images/gray-checker-piece.svg' },
{ squareId: '8-2', id: '58', class: 'square checkerboard-square-red', img: '' },
{ squareId: '8-3', id: '59', class: 'square checkerboard-square-black', img: '../../assets/images/gray-checker-piece.svg' },
{ squareId: '8-4', id: '60', class: 'square checkerboard-square-red', img: '' },
{ squareId: '8-5', id: '61', class: 'square checkerboard-square-black', img: '../../assets/images/gray-checker-piece.svg' },
{ squareId: '8-6', id: '62', class: 'square checkerboard-square-red', img: '' },
{ squareId: '8-7', id: '63', class: 'square checkerboard-square-black', img: '../../assets/images/gray-checker-piece.svg' },
{ squareId: '8-8', id: '64', class: 'square checkerboard-square-red', img: '' },
];
constructor(private sharedService: SharedService, private screenService: ScreenService) { }
ngOnInit(): void {
this.sharedService.sendStartGame().subscribe(data => this.addPieces());
this.sharedService.sendEndGame().subscribe(data => this.newGame = data);
}
drop(event: CdkDragDrop<any>, id) {
console.log('Do you see this');
const fromData = event.previousContainer.data;
const toData = event.container.data;
console.log('This is the fromData', fromData);
console.log('This is the toData', toData);
}
addPieces() {
this.newGame = true;
this.disabled = true;
this.sharedService.player1Active.next(true);
}
}
请使用来自cdkapi的moveItemInArray和transferArrayItem方法。
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex,
);
}
关于cdkDropList以及如何使用传递值。
cdkDropList只是一个具有允许拖放的属性Data的组件。但是数据可以是"0"；任何东西"；。真的，这个名字不是很"util"；。
想象一下两个简单的cdk下拉列表。我"硬编码"；一个和两个的数据属性
<div cdkDropListGroup class="board">
<div class="dropList"
cdkDropList
cdkDropListOrientation="horizontal"
[cdkDropListData]="'One'"
(cdkDropListDropped)="drop($event)"
>
<div cdkDrag >
<div>One</div>
<div *cdkDragPlaceholder class="none"></div>
</div>
</div>
<div class="dropList"
cdkDropList
cdkDropListOrientation="horizontal"
[cdkDropListData]="'Two'"
(cdkDropListDropped)="drop($event)"
>
<div cdkDrag >
<div>Two</div>
<div *cdkDragPlaceholder class="none"></div>
</div>
</div>
</div>
<code>
{{result}}
</code>
我们可以使用
drop(event: CdkDragDrop<any>) {
const fromData = event.previousContainer.data;
const toData = event.container.data;
this.result=fromData+"-->"+toData
}
请注意，Angular的唯一功能是在将一个元素从一个cdk下拉列表中拖到另一个时更改变量结果。在执行了函数drop之后；重新喷漆"；再次列出两个cdk下拉列表。由于我们没有发生任何变化，变量结果看起来我们没有被删除，但这不是真的。简单地说，我们不会改变变量。
好吧，更有趣的是，在每个cdkDropList中，我们将有两个"；cdkDrag"；元件
<div cdkDropListGroup class="board">
<div class="dropList vertical"
cdkDropList
[cdkDropListData]="'One'"
(cdkDropListDropped)="drop($event)"
>
<div class="item" *ngFor="let i of [0,1]" cdkDrag >
<div>One</div>
</div>
</div>
<div class="dropList vertical"
cdkDropList
[cdkDropListData]="'Two'"
(cdkDropListDropped)="drop2($event)"
>
<div class="item" *ngFor="let i of [0,1]" cdkDrag >
<div>Two</div>
</div>
</div>
</div>
<code>
{{result2}}
</code>
现在，您可以获得"；索引"；下落的元素和下落的位置。同样，我们要做的唯一一件事是改变变量result2的值(这样我们就可以看到元素不是"丢弃"的(
drop2(event: CdkDragDrop<any>) {
const fromData = event.previousContainer.data;
const toData = event.container.data;
this.result2=fromData+"("+event.previousIndex+")-->"+toData+"("+event.currentIndex+")"
}
好吧，我们可以想象当我们使用一个数组来代替"时会发生什么；硬编码"；cdk拖动元素，以及我们如何想象一个函数在数组之间交换元素。
现在我们要做一些更有趣的事情，我们将定义一个数组
myArray=[{id:1,name:'One'},{id:2,name:'Two'}]
而"；数据"；对于第一个cdk拖动，lisk是元素myArray[0]；数据"；第二个cdk拖动列表是元素myArray1。
<div cdkDropListGroup class="board">
<div class="dropList"
cdkDropList
cdkDropListOrientation="horizontal"
[cdkDropListData]="myArray[0]"
(cdkDropListDropped)="drop3($event)"
>
<div cdkDrag >
<div>{{myArray[0].name}}</div>
<div *cdkDragPlaceholder class="none"></div>
</div>
</div>
<div class="dropList"
cdkDropList
cdkDropListOrientation="horizontal"
[cdkDropListData]="myArray[1]"
(cdkDropListDropped)="drop3($event)"
>
<div cdkDrag >
<div>{{myArray[1].name}}</div>
<div *cdkDragPlaceholder class="none"></div>
</div>
</div>
</div>
<code>
{{myArray|json}}
</code>
现在，在函数drop中，我们将交换属性"；name"；两个阵列的
drop3(event: CdkDragDrop<any>) {
const fromData = event.previousContainer.data;
const toData = event.container.data;
const value=fromData.name
fromData.name=toData.name
toData.name=value
}
请注意，唯一的变化是属性"；name"；(属性"id"不变(
我们可以选择数据是myArray[0]和myArray1，也可以简单地选择数据是0和1
<div cdkDropListGroup class="board">
<div class="dropList"
cdkDropList
cdkDropListOrientation="horizontal"
[cdkDropListData]="0"
(cdkDropListDropped)="drop4($event)"
>
<div cdkDrag >
<div>{{myArray[0].name}}</div>
<div *cdkDragPlaceholder class="none"></div>
</div>
</div>
<div class="dropList"
cdkDropList
cdkDropListOrientation="horizontal"
[cdkDropListData]="1"
(cdkDropListDropped)="drop4($event)"
>
<div cdkDrag >
<div>{{myArray[1].name}}</div>
<div *cdkDragPlaceholder class="none"></div>
</div>
</div>
</div>
<code>
{{myArray|json}}
</code>
以及我们的功能
drop4(event: CdkDragDrop<any>) {
const fromData = event.previousContainer.data;
const toData = event.container.data;
const value=this.myArray[fromData].name
this.myArray[fromData].name=this.myArray[toData].name
this.myArray[toData].name=value
}
你可以看到堆叠的