# How to Drag-Drop Multiple Elements with .PNGs vs .SVGs ? **URL:** \ **Category:** Uncategorized\ **Created:** [January 7, 2023, 2:44am UTC](https://forum.kirupa.com/t/how-to-drag-drop-multiple-elements-with-pngs-vs-svgs/656053 "2023-01-07T02:44:08Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [January 7, 2023, 2:44am UTC](https://forum.kirupa.com/t/how-to-drag-drop-multiple-elements-with-pngs-vs-svgs/656053/1 "2023-01-07T02:44:08Z")
Hello , Thank You for your article on Drag-Drop Multiple Elements . I would like to find it again , Pls , where is it ? The question I have re: the article is “how can I modify it to work with .png images” ? I am trying to do that now , turns out I can only Drag-Drop it once , per page load , then is won’t budge again , until I re-Load the Page . Your Example is Exactly what I have been trying to do for weeks , but I need the Transparency of .PNGs . I have one way , but it is very SLOW and finicky , Yours is Plenty Fast . I can Post the code if needed . Thanks for your Help… ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [January 7, 2023, 2:46am UTC](https://forum.kirupa.com/t/how-to-drag-drop-multiple-elements-with-pngs-vs-svgs/656053/2 "2023-01-07T02:46:34Z")
Here you go: [Drag Multiple Elements](https://www.kirupa.com/html5/examples/drag_multiple.htm) The thread that discusses can be seen here: [Create a Draggable Element in JavaScript - #3 by kirupa](http://forum.kirupa.com/t/create-a-draggable-element-in-javascript/638149/3) The easiest way to do this is to put your images inside the div element that we are currently dragging around. You will need to adjust the styles on the div to not be a circle as is currently shown in the examples, though 🙂 ---
**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [January 7, 2023, 3:27am UTC](https://forum.kirupa.com/t/how-to-drag-drop-multiple-elements-with-pngs-vs-svgs/656053/3 "2023-01-07T03:27:22Z")
Thank You , I’ll give it a shot . ---
**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [January 9, 2023, 5:20pm UTC](https://forum.kirupa.com/t/how-to-drag-drop-multiple-elements-with-pngs-vs-svgs/656053/4 "2023-01-09T17:20:46Z")
Hello again , Your code works GREAT for images . [https://www.kirupa.com/html5/examples/drag\_multiple.htm](https://www.kirupa.com/html5/examples/drag_multiple.htm) But I’m having troubles with my ‘contextmenu’ code . ```auto Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-LISTEN-on-DIV.html:136 Uncaught TypeError: clickedItem.cloneNode is not a function at HTMLDocument.fireContextMenu (Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-LISTEN-on-DIV.html:136:27) ``` Can Try it here: [https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-LISTEN-on-DIV.html](https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-LISTEN-on-DIV.html) My code ; ```auto file:///C:/2023-Drag-Drop-AnyWhere/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-LISTEN-on-DIV.html

file:///C:/2023-Drag-Drop-AnyWhere/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-LISTEN-on-DIV.html

``` Tanks for your Help… ---
**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [January 10, 2023, 12:25am UTC](https://forum.kirupa.com/t/how-to-drag-drop-multiple-elements-with-pngs-vs-svgs/656053/5 "2023-01-10T00:25:33Z")
Turns out I needed to use this ```auto var clone = event.target.cloneNode(true); instead of this // Get the element var elem = hold_this_id ; console.log("02 hold_this_id = " + hold_this_id); //console.log(elem); // Create a copy of it var clone = elem.cloneNode(true); // statement 134 ``` Below is the evidence that the clone actually worked . What I have to figure next is why the Clones can’t be Dragged & Dropped ; Any Ideas ? Thanks… ```auto file:///C:/2023-Drag-Drop-AnyWhere/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOW-Working.html

https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working.html

```