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>

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

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

无法从角度5＆amp ;;制造多个内部可拖动物体。 dragula

1 个答案: