我有以下 HTML/JS 代码
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
this.style.opacity = '0.4';
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<!--Create Left Panel-->
<div id="leftPanel" class="container-left">
<!--Create subpanel for each data (submenus) and add initial divs (elements)-->
<div id="panelEntrada" class="container-left-entrada" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="draggable1" class="capaEntrada" draggable="true" ondragstart="drag(event)"></div>
</div>
<div id="panelOculta" class="container-left-oculta" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="draggable2" class="capaOculta" draggable="true" ondragstart="drag(event)"></div>
</div>
<div id="panelSalida" class="container-left-salida" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="draggable3" class="capaSalida" draggable="true" ondragstart="drag(event)"></div>
</div>
<!--Divide in 2 sections for each type of activation function-->
<div id="panelActivacion" class="container-left-activation">
<div id="panelSigmoidal" class="container-left-activation-left" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="draggable4" class="funcSigmoidal" draggable="true" ondragstart="drag(event)"></div>
</div>
<div id="panelTanh" class="container-left-activation-right" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="draggable5" class="funcTanh" draggable="true" ondragstart="drag(event)"></div>
</div>
</div>
</div>
<!--container right is all the right area(top, right and area de design)-->
<div class="container-right">
<!--top just the top part-->
<div class="container-top"></div>
<!-- all that's left of the middle part (design y right)-->
<div class="container-bottom">
<div id="bottom" class="container-bottom-left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="container-bottom-right"></div>
</div>
</div>
</body>
</html>
这与另一个 CSS 代码生成以下窗口
左边没有填充的小矩形可以在左边的所有矩形(绿色、黑色、灰色、浅绿色和洋红色)和中间的大矩形(绿色)之间拖动。 我想将每个矩形的静态数量(仅 1 个)保持在其原始位置，但能够将它们添加到中间部分，有点像抽屉，您可以从抽屉中拖动任意数量的对象，但原始的总是留在那儿，新的会添加到您的设计区域。
关于如何做到这一点有什么想法吗？我只能使用 HTML/JS/CSS
最佳答案
找到解决方案，只需更改以下行
ev.target.appendChild(document.getElementById(data));
到
ev.target.appendChild(document.getElementById(data).cloneNode(true));
关于javascript - 维护静态数量的可拖动元素 html/js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49581103/