H5 原生拖拽，纵享丝滑体验

2023-12-07 09:56:31

最近我在一个项目中遇到了一个需求：需要实现任务卡片在不同任务列表之间进行拖拽，以实现任务类别的更改。为了满足这一需求，我查阅了一些相关资料，并对 H5 原生拖拽功能进行了一番学习。现在，我就迫不及待地想与您分享我在这方面的一些经验。

H5 原生拖拽功能是一种非常实用的技术，它可以让您轻松实现拖放操作。例如，您可以使用它来移动网页上的元素，或者将文件从一个位置拖动到另一个位置。

H5 原生拖拽功能的实现非常简单。首先，您需要在要拖动的元素上添加一个拖放事件监听器。当用户开始拖动元素时，该监听器就会触发。然后，您就可以使用 JavaScript 来处理拖放操作。

以下是一个使用 H5 原生拖拽功能实现任务卡片拖拽的示例：

<div id="task-card" draggable="true">
  <p>任务名称</p>
  <p>任务</p>
</div>

<div id="task-list-1">
  <p>任务列表 1</p>
</div>

<div id="task-list-2">
  <p>任务列表 2</p>
</div>

var taskCard = document.getElementById("task-card");
var taskList1 = document.getElementById("task-list-1");
var taskList2 = document.getElementById("task-list-2");

taskCard.addEventListener("dragstart", function(event) {
  event.dataTransfer.setData("text/plain", taskCard.id);
});

taskList1.addEventListener("dragover", function(event) {
  event.preventDefault();
});

taskList1.addEventListener("drop", function(event) {
  event.preventDefault();
  var taskCardId = event.dataTransfer.getData("text/plain");
  var taskCard = document.getElementById(taskCardId);
  taskList1.appendChild(taskCard);
});

taskList2.addEventListener("dragover", function(event) {
  event.preventDefault();
});

taskList2.addEventListener("drop", function(event) {
  event.preventDefault();
  var taskCardId = event.dataTransfer.getData("text/plain");
  var taskCard = document.getElementById(taskCardId);
  taskList2.appendChild(taskCard);
});