无法从 angular 5 & dragula 制作多个内部可拖动对象

Question

我已经试了几天了，但还是不行...

一点解释：

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

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

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

我正在生成 divs 来移动这些对象（容器和项目）。

现在，我得到这样的结果：

其中红色框是主要的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>

还有这个打字稿，我只设置了几个选项：

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 在处理放置事件时得到错误的索引

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

无法从 angular 5 & dragula 制作多个内部可拖动对象

Can't make multiple inners draggable object from angular 5 & dragula

javascript

typescript

dragula

ng2-dragula

angular