如何实现拖拽复制而非移动元素并保留原元素标记状态

要实现**拖拽复制元素（保留原元素）**并标记已拖拽的元素，只需对原代码做以下关键修改：

修改后的完整代码 #

JavaScript #

let injectableEL = ''
function onDrag(ev) {
  injectableEL = ev.target;
}

function onDrop(ev) {
  ev.preventDefault();
  // 克隆原元素（true表示深度克隆，包含所有子节点和属性）
  const clonedEl = injectableEL.cloneNode(true);
  // 可选：移除克隆元素的拖拽属性，避免右侧容器内重复拖拽
  clonedEl.draggable = false;
  // 将克隆体添加到目标容器
  ev.target.appendChild(clonedEl);
  
  // 给原元素添加标记类，用于样式区分
  injectableEL.classList.add('dragged');
}

function onOverDrop(ev) {
  ev.preventDefault();
}

CSS #

ul, li{border:1px solid green}
.mystyle {padding:5px; background:red; cursor: grab;}
.container-left, .container-right {width:45%; margin-left:1%; float:left}
/* 已拖拽元素的标记样式 */
.dragged {
  background-color: #f0f0f0;
  color: #888;
  cursor: not-allowed;
}

HTML #

<h4 id="title"> <span><b> Title </b></span> </h4>
<div class="container-left">
  <ul>
    <li class="A" 
        draggable="true" 
        ondragstart="onDrag(event)">A</li>
    
    <li class="B"  
        draggable="true" 
        ondragstart="onDrag(event)">B</li>
    
    <li  class="C"  
        draggable="true"
        ondragstart="onDrag(event)">C</li>
    
    <li class="D" 
        draggable="true"
        ondragstart="onDrag(event)">D</li>
  </ul>
</div>

<div class="container-right">
  <ul>
    <li> Regression
      <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)" style="height:50px">
       
      </ul>
    </li>
    <li> New Feature
      <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)" style="height:50px">
       
      </ul>
    </li>
    <li> Hot fix
      <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)" style="height:50px">
        
      </ul>
    </li>
  </ul>
</div>

关键修改说明 #

• 复制元素而非移动：原代码直接将原元素追加到目标容器，导致原元素被移除。现在使用cloneNode(true)创建原元素的完整克隆，将克隆体添加到目标，原元素保留在初始位置。
• 标记已拖拽元素：通过给原元素添加dragged类，配合CSS样式（灰化背景、改变光标），直观区分已拖拽过的元素。
• 修复拖拽行为：在onDrop中添加ev.preventDefault()，避免浏览器默认拖拽行为干扰；可选移除克隆元素的draggable属性，防止右侧容器内的克隆体被再次拖拽复制。

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