0

几天以来我一直在尝试，但无法使其正常工作...

小解释：

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

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>

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

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。

但是它不会被删除到对象 Containers 中：

在此处输入图像描述

最后，从容器 (O) 中的句柄元素被读取，就像从 Dragula 中的可拖动对象一样。它可能只是一个CSS问题，但我不确定......

我正在使用 Angular CLI、Angular 5、Dragula，而且我对 Angular 还是很陌生（有时我还在使用 AngularJS）。

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

祝你今天过得愉快 ！

更新

看到这个stackbliz

4

1 回答 1

2

有一个 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>

分叉的 stackblitz 示例

于 2018-02-12T19:17:27.073 回答