Dragula drop in multiple divs

Question

I implemented drag 'n' drop on my application using Dragula, but I need to set it so I can drop my elements to more than one div.

I tried to use a class to achieve it, but it just activates the first one of my divs.

THe HTML:

    <div role="presentation" class="table table-striped">
        <div class="files"  id="upload-file"></div>
    </div>
    <div class="col-md-4">
        <div class="drag-container">Test 1</div>
        <div class="drag-container">Test 2</div>
        <div class="drag-container">Test 3</div>
    </div>

The JS calling Dragula:

dragula([document.querySelector('#upload-file'), document.querySelector('.drag-container')]);

How can I drop te items to more than one div?

Answer 1

You can define an array containers:

var containers = $('.drag-container').toArray();
containers.concat($('#upload-file').toArray());

And then, pass the var 'containers' to dragula initializer:

dragula(containers, {
                isContainer: function (el) {
                    return el.classList.contains('drag-container');
                }
            });

Answer 2

For those without jQuery or $ you can use:

dragula([].slice.call(document.querySelectorAll("drag-container")));

This converts the NodeList to an array and passes it to dragula.