拖动后如何使可拖动元素复制？

Question

我正在制作一个网站，人们可以在该网站上拖放形状来制作自己的作品。 我想要 4 个可以拖动的形状，但形状会复制并保持不变，因此您可以根据需要多次使用它。

我知道 HTML、CSS 和一点 JS，我设法使形状可拖动（通过一些教程），但我不知道如何使它们复制。 任何建议将不胜感激！ 谢谢！

 // 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

OP 代码的这些修改将在拖放 div 时执行以下操作：

复制拖动的 div 并将其添加到<body>
将拖动的 div 移回其起始 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>

拖动后如何使可拖动元素复制？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-02-10 19:47:22

拖动后如何使可拖动元素复制？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-02-10 19:47:22

解决方案1
0 已采纳 2021-02-10 19:47:22