html实现拖动的方法

HTML中实现拖动的方式有两种，分别是使用draggable属性与使用拖放API（Drag and Drop API）。

1. 使用draggable属性

draggable属性是HTML5新增的属性，在使用时需要为元素设置该属性为true，例如：

<div draggable="true">
  这是可以拖动的元素
</div>

设置draggable属性后，元素就可以被用户拖动。如果希望阻止元素拖动，则可以使用preventDefault()方法。

在拖动过程中，还需要处理dragstart、drag、dragend等事件来实现相应的操作。例如，在拖动开始时，可以将拖动的数据存储到DataTransfer对象中，代码如下：

element.addEventListener('dragstart', function(event) {
  // 将数据存储到DataTransfer对象中
  event.dataTransfer.setData("text/plain", "Hello World!");
});

在拖动结束时，可以执行相应的操作，例如删除原元素或移动元素位置，代码如下：

element.addEventListener('dragend', function(event) {
  // 执行相应的操作
});

2. 使用拖放API

拖放API是一套JavaScript API，为拖动和放置提供了更多更灵活的控制能力。使用API实现拖动，需要处理dragstart、drag、dragend事件；使用API实现放置，需要处理dragenter、dragover、dragleave、dragend和drop事件。

例如：

// 源元素拖动时，将数据存储到DataTransfer对象中
element.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData("text/plain", "Hello World!");
});

// 目标元素允许拖入，防止浏览器默认操作
target.addEventListener('dragover', function(event) {
  event.preventDefault();
});

// 目标元素接受拖入数据
target.addEventListener('drop', function(event) {
  // 取出数据
  var data = event.dataTransfer.getData("text/plain");
  // 执行操作
});

需要注意的是，使用API实现拖放时需要防止浏览器默认操作，并提供必要的反馈信息，例如在dragenter和dragleave时改变目标元素的样式。

总结：

使用draggable属性和拖放API都可以实现HTML元素的拖动，其中使用API的方式更为灵活控制，同时也更为复杂，需要处理好多事件，处理不当可能会造成一些错误和不必要的损失。建议在实现拖动功能时选择使用draggable属性，当需要处理更为复杂的逻辑时再使用拖放API。