求助：如何为左右两栏共10项的Drag and Drop添加带动画的点状边框占位符

我来帮你搞定这个拖拽占位符的问题！结合你想要的点状边框+流畅动画效果，我整理了一个完整的实现方案，完全适配你的左右两栏各5个项目的布局需求：

1. HTML 结构 #

首先搭建基础的左右栏布局，每个栏里包含可拖拽项目，同时准备一个隐藏的占位符元素：

<div class="container">
  <!-- 左栏 -->
  <div class="column" id="left-column">
    <div class="item" draggable="true">项目 1</div>
    <div class="item" draggable="true">项目 2</div>
    <div class="item" draggable="true">项目 3</div>
    <div class="item" draggable="true">项目 4</div>
    <div class="item" draggable="true">项目 5</div>
  </div>

  <!-- 右栏 -->
  <div class="column" id="right-column">
    <div class="item" draggable="true">项目 6</div>
    <div class="item" draggable="true">项目 7</div>
    <div class="item" draggable="true">项目 8</div>
    <div class="item" draggable="true">项目 9</div>
    <div class="item" draggable="true">项目 10</div>
  </div>
</div>

<!-- 拖拽占位符 -->
<div class="placeholder" id="placeholder"></div>

2. CSS 样式 #

设置布局样式、拖拽项目样式，重点实现占位符的点状边框和流畅过渡动画：

.container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.column {
  width: 250px;
  min-height: 400px;
  background: #f5f5f5;
  padding: 10px;
  border-radius: 8px;
}

.item {
  padding: 12px;
  margin-bottom: 8px;
  background: white;
  border-radius: 4px;
  cursor: grab;
  transition: all 0.2s ease;
}

.item:active {
  cursor: grabbing;
  opacity: 0.7;
}

/* 占位符样式 */
.placeholder {
  height: 44px; /* 和项目高度匹配 */
  margin-bottom: 8px;
  border: 2px dotted #666;
  border-radius: 4px;
  transition: all 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

.placeholder.show {
  opacity: 1;
}

3. JavaScript 逻辑 #

处理拖拽事件，控制占位符的显示、位置调整和项目的移动：

const placeholder = document.getElementById('placeholder');
let draggedItem = null;

// 监听拖拽开始事件
document.addEventListener('dragstart', (e) => {
  draggedItem = e.target;
  // 给拖拽的项目添加半透明效果
  setTimeout(() => {
    draggedItem.style.opacity = '0.4';
  }, 0);
});

// 监听拖拽结束事件
document.addEventListener('dragend', (e) => {
  draggedItem.style.opacity = '1';
  draggedItem = null;
  // 隐藏占位符
  placeholder.classList.remove('show');
  placeholder.remove();
});

// 监听拖拽经过事件（阻止默认行为才能触发drop）
document.addEventListener('dragover', (e) => {
  e.preventDefault();
});

// 监听拖拽进入元素事件
document.addEventListener('dragenter', (e) => {
  e.preventDefault();
  const column = e.target.closest('.column');
  const item = e.target.closest('.item');

  if (column) {
    // 如果进入的是栏，把占位符放到末尾
    if (!item) {
      column.appendChild(placeholder);
      placeholder.classList.add('show');
      return;
    }

    // 如果进入的是项目，判断位置（插入到项目前面还是后面）
    const rect = item.getBoundingClientRect();
    const midPoint = rect.top + rect.height / 2;
    if (e.clientY < midPoint) {
      item.before(placeholder);
    } else {
      item.after(placeholder);
    }
    placeholder.classList.add('show');
  }
});

// 监听拖拽离开元素事件
document.addEventListener('dragleave', (e) => {
  // 只有当完全离开栏的时候才隐藏占位符
  const column = e.target.closest('.column');
  if (!column || !column.contains(e.relatedTarget)) {
    placeholder.classList.remove('show');
    placeholder.remove();
  }
});

// 监听放置事件
document.addEventListener('drop', (e) => {
  e.preventDefault();
  if (draggedItem && placeholder.parentElement) {
    // 把拖拽的项目插入到占位符的位置
    placeholder.before(draggedItem);
    // 移除占位符
    placeholder.classList.remove('show');
    placeholder.remove();
  }
});

关键要点说明 #

• 占位符动画：通过transition: all 0.2s ease实现显示/隐藏和位置变化的流畅过渡，避免生硬的跳转
• 位置判断：在dragenter事件中，通过计算项目的中点位置，决定占位符插入到项目的前面还是后面，让拖拽体验更精准
• 视觉反馈：拖拽时给项目添加半透明效果，占位符使用点状边框，清晰提示放置位置
• 事件处理：正确阻止dragover的默认行为，否则无法触发drop事件；dragleave事件中判断是否完全离开栏，避免占位符误隐藏

这个方案完全符合你想要的效果，你可以直接复制代码运行，根据自己的需求调整样式（比如颜色、间距、项目高度等）。

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