实现JavaScript动态列表拖放功能

<ul id="task-list-display"></ul>

const activities = [
  { index: 1, description: "学习JavaScript" },
  { index: 2, description: "编写教程文章" },
  { index: 3, description: "提交代码审查" }
];

const display = document.getElementById('task-list-display');

/**
 * 动态渲染任务列表
 * @param {Array<Object>} activities - 任务数据数组
 */
const renderList = (activities) => {
  // 清空现有列表，避免重复渲染
  display.innerHTML = ''; 
  activities.forEach((activity) => {
    display.insertAdjacentHTML('beforeend', ` 
      <li class="task-item draggable" draggable="true" data-id="${activity.index}">
        <div class="chk-descr">
          <input data-a1="${activity.index}" type="checkbox" name="completed"/>
          <p data-b1="${activity.index}" class="description" contenteditable="true">${activity.description}</p>
        </div>
      </li> 
    `);
  });
};

// 初始渲染列表
renderList(activities);

// 1. dragstart 事件：开始拖动
display.addEventListener("dragstart", e => {
  // 确保拖动的是列表项本身
  if (e.target.classList.contains('draggable')) {
    // 存储被拖动元素的唯一标识符
    e.dataTransfer.setData("text/plain", e.target.dataset.id);
    // 可选：添加样式表示正在拖动
    e.target.classList.add('dragging-source'); 
  }
});

// 2. dragover 事件：拖动元素悬停
display.addEventListener("dragover", e => {
  // 阻止默认行为以允许放置
  e.preventDefault();

  // 清除所有列表项的 'over' 样式
  [...display.querySelectorAll('li')].forEach(li => li.classList.remove('over'));

  // 如果当前悬停的是一个列表项，则为其添加 'over' 样式
  const targetLi = e.target.closest('li.task-item');
  if (targetLi) {
    targetLi.classList.add('over');
  }
});

// 3. drop 事件：放置元素
display.addEventListener("drop", e => {
  // 阻止默认行为，通常是打开拖放的文件等
  e.preventDefault();

  // 清除所有列表项的 'over' 样式
  [...display.querySelectorAll('li')].forEach(li => li.classList.remove('over'));

  // 获取被拖动元素的 ID
  const draggedItemId = e.dataTransfer.getData("text/plain");
  const originalDraggedItem = document.querySelector(`li[data-id="${draggedItemId}"]`);

  // 获取放置的目标列表项
  const dropTargetLi = e.target.closest('li.task-item');

  // 确保拖动源和目标都存在且不是同一个元素
  if (originalDraggedItem && dropTargetLi && originalDraggedItem !== dropTargetLi) {
    // 克隆被拖动元素，true 表示深拷贝所有子节点
    const clonedDraggedItem = originalDraggedItem.cloneNode(true);

    // 将克隆的元素插入到目标元素之前
    display.insertBefore(clonedDraggedItem, dropTargetLi);

    // 移除原始被拖动元素
    display.removeChild(originalDraggedItem);

    // 可选：移除拖动源的样式
    clonedDraggedItem.classList.remove('dragging-source');

    // 重要：更新底层数据模型以反映DOM变化
    // 这里需要根据实际应用逻辑重新排序activities数组
    // 例如：
    // updateActivitiesOrder(); 
  }
});

// 4. dragend 事件：拖动结束（无论是否成功放置）
display.addEventListener("dragend", e => {
  // 移除拖动源的样式
  e.target.classList.remove('dragging-source');
});

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li div {
  display: flex;
  flex-direction: row;
  align-items: center; /* 垂直居中 */
  padding: 8px;
  border: 1px solid #eee;
  margin-bottom: 4px;
  background-color: #f9f9f9;
}

.task-item.over {
  border-top: 2px solid #3498db; /* 放置目标上方显示蓝色边框 */
  background-color: #e8f4f8; /* 放置目标背景色变浅 */
}

.task-item.dragging-source {
  opacity: 0.5; /* 被拖动的元素半透明 */
  border: 1px dashed #999;
}