如何使用HTML/JS保持可拖拽元素数量固定

我懂你的需求啦——现在你的拖拽功能是把原面板里的元素直接移到目标容器，导致左边的可拖拽元素越来越少，你想让这些元素一直保留在原面板，每次拖拽都复制一份到目标容器对吧？

其实核心问题在于原来的appendChild方法会直接移动DOM元素，而不是复制。咱们只需要修改drop函数，改成克隆元素再添加，同时修复一下拖拽后的透明度问题就行，具体改法如下：

修改思路 #

• 不要直接移动原元素，而是用cloneNode(true)克隆一个完整的副本（true表示连同子元素一起克隆）
• 给克隆出来的元素重新设置一个唯一ID，避免DOM里出现重复ID的问题
• 在拖拽结束后（或者drop完成后）恢复原元素的透明度，不然拖拽过的元素会一直半透明

修改后的完整代码 #

<!DOCTYPE HTML>
<html>
<head>
    <style>
        /* 加点样式让效果更明显，你可以根据自己的需求调整 */
        #leftPanel, #rightPanel {
            display: inline-block;
            width: 200px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        .draggable {
            padding: 8px;
            margin: 5px 0;
            background: #f0f0f0;
            cursor: move;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
            ev.target.style.opacity = '0.4';
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            var originalElement = document.getElementById(data);
            
            // 1. 克隆原元素，true表示深度克隆（包含子元素）
            var clonedElement = originalElement.cloneNode(true);
            // 2. 给克隆元素设置新ID，避免重复
            clonedElement.id = data + "_clone_" + Date.now();
            // 3. 将克隆元素添加到目标容器
            ev.target.appendChild(clonedElement);
            // 4. 恢复原元素的透明度
            originalElement.style.opacity = '1';
        }

        // 可选：如果拖拽取消（比如拖到外面），也恢复原元素透明度
        function dragEnd(ev) {
            ev.target.style.opacity = '1';
        }
    </script>
</head>
<body>
    <!-- 左侧原面板 -->
    <div id="leftPanel" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div id="drag1" class="draggable" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)">可拖拽元素1</div>
        <div id="drag2" class="draggable" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)">可拖拽元素2</div>
        <div id="drag3" class="draggable" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)">可拖拽元素3</div>
    </div>

    <!-- 右侧目标容器 -->
    <div id="rightPanel" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

额外说明 #

• 我加了点基础样式，方便你直观看到效果，你可以根据自己的项目需求调整样式
• 新增了dragEnd函数，用来处理拖拽取消的情况（比如用户拖到容器外面松开），确保原元素的透明度能恢复正常
• 克隆元素时修改ID是因为DOM里的ID必须唯一，不修改的话可能会导致后续操作出现问题

内容的提问来源于stack exchange，提问作者gabevt