Angular 嵌套的可拖动行和列

Question

我看过的资源：

https://github.com/valor-software/ng2-dragula

描述类似问题的问题：

https://github.com/valor-software/ng2-dragula/issues/309

https://github.com/valor-software/ng2-dragula/issues/663

我正在使用 ng2-dragula，我正在尝试嵌套可拖动项目，但尽管看了示例，我还是无法弄清楚如何去做。

这个允许将列从一行拖到另一行就好了：

<div>
  <row *ngFor="let row of rows" dragula="columns" [dragulaModel]="row?.columns">
    <column *ngFor="let column of row?.columns"></column>
  </row>
</div>

但是我还需要行本身是可拖动的，所以我这样做了：

<div dragula="rows" [dragulaModel]="rows">
  <row *ngFor="let row of rows" dragula="columns" [dragulaModel]="row?.columns">
    <column *ngFor="let column of row?.columns"></column>
  </row>
</div>

这样可以拖动行，但现在列不起作用，如果我尝试将 column 拖到另一个 row 中，我会收到错误消息：

ERROR DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

列也不能在同一行内重新排序。

似乎拖动 column 会导致拖动 row 而不是 column。

我做错了什么？

Answer 1

我给你举了个例子。让我知道这是否回答了您的问题。为行设置 dragula 选项 "bag" 允许您传递自己的无效处理程序。因此，如果您尝试拖动名称为 "column" 的东西，例如 class，请不要让父容器拖动。

https://embed.plnkr.co/Y4Gy0nHuGKpaYQObXLWG/

在您的构造函数中，或每当您为父 dragula 设置 dragula 选项时：

constructor(dragulaService: DragulaService) {
  dragulaService.setOptions('bag', {
    invalid(el, handle) {
      // If the selected element className is column, 
      //    dont allow the row to be dragged. This will allow 
      //    the column to be dragged separate from the row. 
      return (el.className == "column");
    }
  });
}

HTML:

<div [dragula]="'bag'" [dragulaModel]="rows">
  <div class="row" *ngFor="let row of rows">
    {{row.value}}
    <div [dragula]="'bag2'" [dragulaModel]="row.columns">
      <div class="column" *ngFor="let column of row.columns">
          {{column.value}}
      </div>
    </div>
  </div>
</div>

Answer 2

试试这个：

<div dragula="myBag" [dragulaModel]="rows" class="iAmContainer">
  <row *ngFor="let row of rows" dragula="myBag" [dragulaModel]="row?.columns" class="iAmRow">
    <column *ngFor="let column of row?.columns" class="iAmCol"></column>
  </row>
</div>

我将 dragula="myBag" 设置为行和列，并在元素上设置类。

现在 ngOnInit 使用类似这样的代码：

const bag: any = this.dragulaService.find('myBag');
if (bag !== undefined) this.dragulaService.destroy('myBag');
this.dragulaService.setOptions('myBag', {
  revertOnSpill: true,
  accepts: function (el, target, source, sibling) {
    return !el.contains(target) && 
           ((el.className == 'iAmCol' && target.className == 'iAmRow') || 
            (el.className == 'iAmRow' && target.className == 'iAmContainer'));
  },
});

我使用元素和目标的 className 来确定它们是否兼容。

Angular 嵌套的可拖动行和列

Angular nested draggable rows and columns

html

typescript

dragula

ng2-dragula

angular