javascript - 无法从 Angular 5 和 Dragula 制作多个内部可拖动对象

Question

我几天来一直在尝试，但无法使其发挥作用......

小解释:

在这个例子中，我有一个像这样的对象数组:

public containers: Array<object> = [
  {
    "name": "container 1",
    "items": ["1", "2", "3"]
  },
  {
    "name": "container 2",
    "items": ["4", "5"]
  }
];

其中每个对象都有一个字符串数组。

我正在生成 div 来使这些对象移动(容器和项目)。

现在，我得到了这样的东西:

其中红色框是主 div，黑色框是容器，蓝色框是项目。

使用此 html:

<div class="feuille-drag" [dragula]='"containers"' [dragulaModel]='containers'>
  <div *ngFor="let container of containers" class="drag-container" [dragula]='"blocks"'[dragulaModel]='container.items'>
    <span class="handle">O</span>
    <div *ngFor="let item of container.items" class="drag-bloc">
      <span class="handleF">X</span>
      {{item}}
    </div>
  </div>

还有这个 typescript ，我只设置了几个选项:

dragulaService.setOptions('containers', {
  revertOnSpill: true,
  copy: false,
  moves: function (el, container, cHandle) {
    return cHandle.className === 'handle';
  }
});

dragulaService.setOptions('blocks', {
  revertOnSpill: true,
  copy: false,
  moves: function (el, container, bHandle) {
    return bHandle.className == 'handleF';
  }
});

如果你看得清楚的话，你可以在截图中看到，有一个空的蓝色框。一开始并不在这里，我只是将一个蓝色盒子放入另一个盒子中，它就在我的对象容器中创建了一个 undefined 元素。

另一个问题:如果我将一个蓝色盒子移动到另一个黑色盒子(容器)中，蓝色盒子将消失，而另一个蓝色盒子将移动。

示例:如果我将蓝色盒子 1 移动到容器 2 中，盒子 1 将消失，盒子 2 将进入容器 2。

但它不会被删除到对象容器中:

结束，最后一件事，来自容器(O)的句柄元素被像来自dragula的可拖动对象一样被读取。这可能只是一个CSS问题，但我不确定......

我正在使用 Angular CLI、Angular 5、Dragula，而且我对 Angular 还很陌生(有时我仍然使用 AngularJS)。

我希望它能得到很好的解释，希望有人能帮助我，如果已经有答案，我很抱歉，我没有找到它!

祝你有美好的一天!

更新

查看此stackbliz

Answer 1

有一个 html 元素破坏了您的结构:

<span class="handle">O</span>

ng2-dragula 处理 drop 事件时获取错误索引

drake.on('drop', (dropElm: any, target: any, source: any) => {
   if (!drake.models || !target) {
     return;
   }
   dropIndex = this.domIndexOf(dropElm, target);

https://github.com/valor-software/ng2-dragula/blob/master/src/components/dragula.provider.ts#L78

target 这里是您的 div.drag-container，其中包含 container.items.length + 1 元素。

将新的 undefined 元素添加到您的 container.items 后，

要解决此问题，我建议您将拖动元素包装在其自己的容器中，例如:

...
<span class="handle">O</span>

<div [dragula]='"blocks"' [dragulaModel]='container.items'>
    <div *ngFor="let item of container.items;" class="drag-bloc">
        <span class="handleF">X</span> {{item}}
    </div>
</div>

<强> Forked stackblitz example