0

实际上我有这样的场景，我有四个 div 并且我应该能够交换 div 方块，这意味着我可以在没有任何错误的情况下相互交换 div 的位置。这样做时我的代码在我动态生成 div 时不起作用。如果我手动创建四个 div，那么代码有点工作。我附上了 stackblitz 链接。有人可以帮我解决这个问题吗..

请通过此链接> https://stackblitz.com/edit/angular-srvwgw

@HostListener('drop', ['$event'])

onDrop(event) { event.preventDefault();

var data = event.dataTransfer.getData("text");
//  event.dataTransfer.dropEffect = 'copy';
var div = document.getElementById(data);
var mynode = document.getElementById(event.target.id);

var clonedElement1 = div.cloneNode(true);
var clonedElement2 = mynode.cloneNode(true);

mynode.parentNode.replaceChild(clonedElement1, mynode);
div.parentNode.replaceChild(clonedElement2, div);

}

我应该能够将 div 的位置与其他 div 交换。

4

1 回答 1

1

这可以通过使用Angular Drag and Drop来实现 cdkList

创建几个cdkDropList's 并cdkDropListData通过单向绑定设置到 TS 中自己的数组。

通过钩子(cdkDropListDropped)="drop($event)"，您可以在容器之间切换项目transferArrayItem（参见 Angular 网站上的 API）。

在下面的 stackblitz 中，我使用了以下内容，它会在项目所在位置的正下方置换元素，除非在它置换前一个元素的末尾。

  drop(event: CdkDragDrop<string[]>) {
    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);

      // transfer next or prior if last
      if (event.currentIndex + 1 < event.container.data.length) {
        transferArrayItem(event.container.data,
                    event.previousContainer.data,
                    event.currentIndex+1,
                    event.previousIndex);
      } else {
        transferArrayItem(event.container.data,
                    event.previousContainer.data,
                    event.currentIndex-1,
                    event.previousIndex);  
      }

    }

https://stackblitz.com/edit/angular-nxrupb

于 2019-05-15T15:58:29.273 回答