How to make draggable elements replicate after drag?

Question

I'm making a website on which people would be able to drag and drop shapes to make their own compositions. I want to have 4 shapes that you can drag, but the shape replicates and stays so you can use it as many times as you want.

I know HTML, CSS and a bit of JS and I managed to make the shapes draggable (with some tutorials), but I can't work out how to make them replicate. Any suggestions would be very appreciated! Thanks!

 // Make the DIV element draggable: dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { // if present, the header is where you move the DIV from: document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else { // otherwise, move the DIV from anywhere inside the DIV: elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; } }

 #mydiv { position: absolute; top: 100px; left: 100px; z-index: 9; background-color: #ffffffff; text-align: center; cursor: move; transform: translate(-50%, -50%) scale(0.5); }

 <div id="mydiv"> <div id="mydivheader"><img src="m1.png"></div> </div> <script src="drag.js"></script>

Answer 1

These modifications of the OP's code will do the following when the dragged div is dropped:

make a clone of the dragged div and add it to the <body>
move the dragged div back to its starting position

 const mydiv = document.getElementById("mydiv"); // Make the DIV element draggable: dragElement(mydiv); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { // if present, the header is where you move the DIV from: document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else { // otherwise, move the DIV from anywhere inside the DIV: elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; // ****** start added code ****** // create a clone of mydiv and append it to body const newDiv = mydiv.cloneNode(true); document.body.appendChild(newDiv); // move mydiv back to its starting position mydiv.style.top = null; mydiv.style.left = null; // ****** end added code ****** } }

 #mydiv { position: absolute; top: 100px; left: 100px; z-index: 9; background-color: #ffffffff; text-align: center; cursor: move; transform: translate(-50%, -50%) scale(0.5); }

 <div id="mydiv"> <div id="mydivheader"><img src="https://via.placeholder.com/80/"></div> </div> <script src="drag.js"></script>

How to make draggable elements replicate after drag?

Question

1 answers

solution1
0 ACCPTED 2021-02-10 19:47:22

How to make draggable elements replicate after drag?

Question

1 answers

solution1 0 ACCPTED 2021-02-10 19:47:22

solution1
0 ACCPTED 2021-02-10 19:47:22