Question

实际上我有这样的情况，我有四个div，我应该可以交换div的平方，这意味着我可以彼此互换div的位置而没有任何错误。这样做的话，当我生成div时，mycode不起作用divs动态。如果手动创建四个div，则代码工作正常。我已附加了stackblitz链接。有人可以帮我解决这个问题。

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

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

onDrop（事件）{ 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的位置彼此互换。

Answer 1

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

来实现

创建多个cdkDropList，并通过单向绑定到TS中自己的数组来设置cdkDropListData。

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

在下面的堆叠闪电战中，我使用了以下命令，将元素直接放置在放置该项目的位置下方，除非在其末尾放置了紧挨着该元素的位置。

  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

无法执行div元素的拖放

1 个答案: