HTML5 ：让元素具备拖拽功能，如此简单！

HTML5中的拖拽事件

HTML5中的draggable事件允许您设置元素的可拖放功能。当用户在支持拖拽的元素上按下鼠标左键并移动鼠标时，就会触发这个事件。您可以使用e.dataTransfer.setData()方法来设置拖拽的数据，以便在拖拽元素时传递数据。

设置元素为可拖放

要设置元素为可拖放，您只需在元素上添加draggable属性。例如：

<div id="draggable" draggable="true">可拖拽元素</div>

Draggable事件

draggable事件会在拖拽元素时触发。您可以使用这个事件来处理拖拽操作。例如，您可以使用e.dataTransfer.setData()方法来设置拖拽的数据，以便在拖拽元素时传递数据。

e.dataTransfer.setData()

e.dataTransfer.setData()方法用于设置拖拽的数据。您可以使用这个方法来传递任何类型的数据。例如，您可以使用以下代码来设置拖拽的数据：

e.dataTransfer.setData("text/plain", "这是拖拽的数据");

实战案例

将元素放置到放置框内

在这个案例中，我们将演示如何将元素拖放到放置框内。首先，我们需要创建一个放置框，如下所示：

<div id="dropzone">放置框</div>

然后，我们需要设置元素的可拖放功能，如下所示：

<div id="draggable" draggable="true">可拖拽元素</div>

接下来，我们需要处理draggable事件，如下所示：

document.getElementById("draggable").addEventListener("dragstart", function(e) {
  e.dataTransfer.setData("text/plain", "这是拖拽的数据");
});

document.getElementById("dropzone").addEventListener("dragover", function(e) {
  e.preventDefault();
});

document.getElementById("dropzone").addEventListener("drop", function(e) {
  e.preventDefault();

  var data = e.dataTransfer.getData("text/plain");

  alert(data);
});

拖住排序加拖拽删除

在这个案例中，我们将演示如何拖住元素进行排序，并使用拖拽删除功能删除元素。首先，我们需要创建一个元素列表，如下所示：

<ul id="sortable">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
  <li>元素4</li>
  <li>元素5</li>
</ul>

然后，我们需要设置元素的可拖放功能，如下所示：

var sortable = document.getElementById("sortable");

for (var i = 0; i < sortable.children.length; i++) {
  sortable.children[i].draggable = true;
}

接下来，我们需要处理draggable事件，如下所示：

sortable.addEventListener("dragstart", function(e) {
  e.dataTransfer.setData("text/plain", e.target.textContent);
});

sortable.addEventListener("dragover", function(e) {
  e.preventDefault();
});

sortable.addEventListener("drop", function(e) {
  e.preventDefault();

  var data = e.dataTransfer.getData("text/plain");

  e.target.textContent = data;
});

最后，我们需要处理拖拽删除功能，如下所示：

sortable.addEventListener("dragend", function(e) {
  if (e.target.parentElement === sortable) {
    e.target.remove();
  }
});

结论

HTML5中的draggable事件允许您设置元素的可拖放功能，以便用户可以将元素拖放到其他位置。您可以使用e.dataTransfer.setData()方法来设置拖拽的数据，以便在拖拽元素时传递数据。通过这两个实战案例，您已经了解了如何使用draggable事件实现拖拽功能。