JavaScript拖拽功能问题：如何将元素插入到指定元素前后而非末尾？

原代码里的drop函数依赖appendChild方法，只能把拖拽元素添加到容器末尾，没法控制插入到现有元素的前后位置。下面是修改后的代码，实现了拖拽到按钮上时，根据鼠标落点决定插入到按钮前还是后，拖拽到容器空白处则仍添加到末尾。

修改后的完整代码 #

JavaScript #

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

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  const draggedElement = document.getElementById(data);
  
  // 避免拖拽元素自己插入自己
  if (draggedElement === ev.target) return;

  let targetContainer = ev.target;
  // 如果触发事件的不是容器，就取它的父容器
  if (!['div1', 'div2'].includes(targetContainer.id)) {
    const targetBtn = targetContainer;
    targetContainer = targetBtn.parentNode;
    
    // 获取按钮的位置信息，判断鼠标在按钮左半还是右半
    const btnRect = targetBtn.getBoundingClientRect();
    const mouseXInBtn = ev.clientX - btnRect.left;
    
    if (mouseXInBtn > btnRect.width / 2) {
      // 鼠标在右半部分，插在按钮后面
      targetContainer.insertBefore(draggedElement, targetBtn.nextSibling);
    } else {
      // 鼠标在左半部分，插在按钮前面
      targetContainer.insertBefore(draggedElement, targetBtn);
    }
  } else {
    // 拖到容器空白处，直接加到末尾
    targetContainer.appendChild(draggedElement);
  }
}

CSS #

#div1,
#div2 {
  float: left;
  width: 500px;
  min-height: 35px; /* 改成最小高度，避免按钮太多溢出 */
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

button {
  margin: 0 5px; /* 给按钮加间距，方便拖拽定位 */
  padding: 5px 10px;
}

HTML #

<h2>Drag and Drop</h2>
<p>Drag the button to any position between other buttons or containers.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <button draggable="true" ondragstart="drag(event)" id="drag1">button1</button>
  <button draggable="true" ondragstart="drag(event)" id="drag2">button2</button>
  <button draggable="true" ondragstart="drag(event)" id="drag3">button3</button>
  <button draggable="true" ondragstart="drag(event)" id="drag4">button4</button>
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

关键修改点说明 #

1. 目标类型判断：在drop函数里先判断触发事件的是容器还是按钮，如果是按钮，就用它的父容器作为插入容器。
2. 插入位置判断：通过getBoundingClientRect()获取按钮的位置，计算鼠标在按钮内的横向偏移，左半部分插在按钮前，右半部分插在按钮后。
3. 边界处理：增加了防止拖拽元素自身插入的判断，避免无效操作；把容器高度改成min-height，防止按钮过多时溢出容器。
4. 体验优化：给按钮添加间距，让拖拽定位更精准。

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