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

Question

I'm trying since few days and can't make it works...

Little explanation :

I've in this example, an array of object like this :

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

Where each object have an array of string.

I'm generating divs to make these object moves (Containers AND Items).

Now, i'm getting something like this :

Where red box is the main div, blacks boxes are containers, and blue boxes are items.

with this 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>

And this typescript, where I only set fews options :

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';
  }
});

If you looks well, you can see in the screenshot that, there is an empty blue box. It wasn't here at the beginning, I only dropped a blue box into another one, and it created an undefined element into my object Containers.

An other problem : If I move a blue box into an other black box (container), the blue box will disappear and an other blue box will move instead.

Example : If I move the blue box 1 into the container 2, the box 1 will disappears, and the box 2 will go into the container 2.

BUT It will not be deleted into the object Containers :

End, last thing, handle elements from containers (O) are being read like draggable object from dragula. Its maybe just a css problem, but i'm not sure so...

I'm using Angular CLI, Angular 5, Dragula, and i'm pretty new on Angular, (I still was on AngularJS sometimes ago).

I hope it's well explained, hope someone can help me, and I'm sorry if there is already an answer about it, I didn't find it !

Have a nice day !

UPDATE

See this stackbliz

Could you make a working example on **[Stackblitz](https://stackblitz.com/edit/angular-material2-issue)** ? Not only this is required, but this would allow us to test your code ! — , Feb 12 '18 at 16:10

score 2 · Accepted Answer · answered Feb 12 '18 at 19:17

There is one html element that breaks your structure:

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

ng2-dragula gets wrong index when handles drop event

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 here is your div.drag-container that includes container.items.length + 1 elements.

After that new undefined element is added to your container.items,

To fix it I would suggest you wrapping dragging elements in its own container like:

...
<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

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

1 Answers1