How to drag from multiple elements to a single.

[User934903920432]

Hi,

I'm trying to clone items from multiple elements to a single one. <div class="items"><div class="item-1" data-el="header">Header</div><div class="item-2" data-el="paragraph">Paragraph</div><div class="item-3" data-el="button">Button</div></div><div class="items"><div class="item-1" data-el="image">Image</div><div class="item-2" data-el="gallery">Gallery</div><div class="item-3" data-el="slider">Slider</div></div><div id="drop-container"></div>

( Sorry for the minified HTML, wouldn't work if I posted it normal)

I tried doing

containers = [document.getElementsByClassName("items"), document.getElementById("drop-container")];

But that's obviously not working. What would be the best way to achieve this ? Basically I'm making some kind of drag & drop page builder, and would like to have multiple categories o f items to drop to a single container.

[User934903920432]

Guess I got it working with a each loop on all classes. Not the best, but it works

https://codepen.io/anon/pen/wpbmWv