Javascript angular 8拖放CDK中的DOM异常

我正在使用angular CDK在angular中创建一个简单的拖放应用程序。我只是想拖我的车 然后把它放到另一个盒子里。但是当释放掉的区域内的拖动框时，我得到了错误。请帮忙修理一下

我犯了一个错误

Unhandled Promise rejection: Failed to execute 'appendChild' on 'Node': The new child element contains the parent. ; Zone: <root> ; Task: Promise.then ; Value: DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
    at DragRef._cleanupDragArtifacts (http://localhost:4200/vendor.js:1615:121)
    at http://localhost:4200/vendor.js:1471:22
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:3365:26)
    at Zone.run (http://localhost:4200/polyfills.js:3130:43)
    at http://localhost:4200/polyfills.js:3861:36
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3397:31)
    at Zone.runTask (http://localhost:4200/polyfills.js:3174:47)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.js:3565:35)
    at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:3475:21)
    at invokeTask (http://localhost:4200/polyfills.js:4609:14) Error: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
    at DragRef._cleanupDragArtifacts (http://localhost:4200/vendor.js:1615:121)
    at http://localhost:4200/vendor.js:1471:22
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:3365:26)
    at Zone.run (http://localhost:4200/polyfills.js:3130:43)
    at http://localhost:4200/polyfills.js:3861:36
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3397:31)
    at Zone.runTask (http://localhost:4200/polyfills.js:3174:47)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.js:3565:35)
    at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:3475:21)
    at invokeTask (http://localhost:4200/polyfills.js:4609:14)
api.onUnhandledError @ zone-evergreen.js:651
handleUnhandledRejection @ zone-evergreen.js:675
api.microtaskDrainDone @ zone-evergreen.js:668
drainMicroTaskQueue @ zone-evergreen.js:566
invokeTask @ zone-evergreen.js:469
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629

和app.component.css文件

.wrapper {
    display: flex;
}
.outerBox {
    width: 300px;
    height: 500px;
    border: 1px solid #333;
    padding: 10px;
    margin: 10px;
}
.innerBox {
    width: 100px;
    height: 100px;
    background: skyblue;
}

请帮忙解决这个错误

---

提前感谢。

您需要在

.ts

文件中定义单独的列表来存储数据，例如

  list1 = ['hello1'];
  list2 = [];

在

ONIMDROP

函数的

.ts

文件中，您还需要提供用于传输数据的代码：

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
    );
}

然后，此代码将在.html文件中工作：

<section>
    <div class="wrapper">
      <div class="outerBox" [cdkDropListData]="list1" id="dropZone1" cdkDropList [cdkDropListConnectedTo]="'dropZone2'" (cdkDropListDropped)="onItemDrop($event)">
          <div *ngFor="let item of list1" class="innerBox" cdkDrag></div>
      </div>
      <div class="outerBox" [cdkDropListData]="list2" id="dropZone2" [cdkDropListConnectedTo]="'dropZone1'" cdkDropList (cdkDropListDropped)="onItemDrop($event)">
        <div *ngFor="let item of list2" class="innerBox" cdkDrag></div>
      </div>
    </div>
</section>

在上面的HTML中，我修复了以下问题：

• 将cdkDropList与cdkDrag元素分开
• 正确指定连接的ID
• 使用*ngFor对要显示的数据进行迭代

---

这里是您可以开始的步骤

组件类中的

定义两个相互连接的列表

并实现moveItemInArray和transferArrayItemcdk助手方法：第一种方法是处理每个列表中的更改索引。第二个用于处理从列表到另一个列表的传输

在模板中：

将每个列表绑定到引用或id（例如#listRef）容器

添加cdkDropList，cdkDropListData，cdkDropListConnectedTo指令

为两个列表添加在CDKDROPLISTDROP下降时侦听的方法，此处为“ONIMDROP”

对每个可拖动项使用cdkDrag指令对每个列表进行迭代

---

我准备了一份工作清单。

你可以参考-。希望能帮上忙是的，我也查过了。它的解决方案是javascript，但我需要修复角度拖放cdk。这肯定会有帮助-我创建了stackblitz用于问题复制。您可以在放下蓝盒后检查控制台。

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
    );
}

<section>
    <div class="wrapper">
      <div class="outerBox" [cdkDropListData]="list1" id="dropZone1" cdkDropList [cdkDropListConnectedTo]="'dropZone2'" (cdkDropListDropped)="onItemDrop($event)">
          <div *ngFor="let item of list1" class="innerBox" cdkDrag></div>
      </div>
      <div class="outerBox" [cdkDropListData]="list2" id="dropZone2" [cdkDropListConnectedTo]="'dropZone1'" cdkDropList (cdkDropListDropped)="onItemDrop($event)">
        <div *ngFor="let item of list2" class="innerBox" cdkDrag></div>
      </div>
    </div>
</section>