2

我看过的资源：

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>

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

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

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

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

我在这里做错了什么？

4

2 回答 2

3

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

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>
于 2018-01-18T17:23:24.870 回答
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元素和目标的 来确定它们是否兼容。

于 2018-01-18T18:47:37.613 回答