After struggling for the past few days, I can't seem to get it to work...
Here is a brief explanation of my issue:
In this example, I have an array of objects structured like this:
public containers: Array<object> = [
{
"name": "container 1",
"items": ["1", "2", "3"]
},
{
"name": "container 2",
"items": ["4", "5"]
}
];
Each object contains an array of strings.
I am trying to create div elements to allow these objects to be moved around (Containers AND Items).
Currently, I am seeing something like this:
https://i.sstatic.net/y2n9R.png
The red box represents the main div, black boxes symbolize containers, and blue boxes represent items.
The corresponding HTML looks like this:
<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>
Additionally, in my TypeScript code, I have set some 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';
}
});
Upon close inspection, you'll notice that there is an empty blue box in the screenshot. This was created when I dropped one blue box into another, resulting in an undefined element being added to my Containers object.
Another issue is that when moving a blue box to a different black box (container), the original blue box disappears and a new one appears instead.
For instance, moving blue box 1 into container 2 causes blue box 1 to vanish and blue box 2 to take its place within container 2.
However, the original blue box is not removed from the Containers object:
https://i.sstatic.net/5r5LR.png
Lastly, the handle elements from the containers (O) are being treated as draggable objects by dragula. This might be a CSS-related issue, but I'm unsure.
I am utilizing Angular CLI, Angular 5, Dragula, and I am relatively new to Angular (previously worked with AngularJS)
I hope this explanation makes sense and that someone can assist me. Apologies if this issue has already been addressed, I couldn't find a solution!
Have a wonderful day!
UPDATE
Please check out this StackBlitz