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?

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?

• javascript
• jquery
• html
• drag-and-drop
• dragula

4 Answers 4

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

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.

querySelector only returns a single element, you would need to use querySelectorAll in order to get a list of elements. Not sure how dragula would handle getting a two element array, with the second element being an array. You may want to generate the array first, add the '#upload-file' to that array, and then pass the array. Or you could generate the array after initializing, and cycle through the array, adding the elements dynamically using something like "drake.containers.push(container);". I got this construct directly from the github site https://github.com/bevacqua/dragula

HTML:

<div className="wrapper">
   <div className="container col-md-4" id="A">
     <div className="panel panel-white">
     </div>
     <div className="panel panel-white">
    </div>
   </div>
   <div className="container col-md-4" id="B">
     <div className="panel panel-white">
     </div>
     <div className="panel panel-white">
    </div>
   </div>
</div>

JS:

dragula([document.querySelector('#A'), document.querySelector('#B')]);

You can drag each item in one column to the other. You can add more columns with the class name of container. If you want to specify a custom class name, you should define option like this :

Option:

 let options = {
        isContainer: (el) => {
          return el.classList.contains('drag-container'); // The immediate elements in this container will be draggable
        }