拖動后如何使可拖動元素復制？

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