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

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

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

在构造函数中，或者为父拉图设置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

试试这个：

>>> import myModule
>>> myModule.sum_it([1,2,3])
Length of list passed in is 3
i = 0   item = 1    sum = 1
i = 1   item = 2    sum = 3
i = 2   item = 3    sum = 6
6

我将<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')); }, });来确定它们是否兼容。

Angular嵌套可拖动的行和列

2 个答案: