html可拖动div代码

HTML中可拖动div的实现，使得使用者可以轻松地将div拖动到指定位置，从而更好地展示网页信息。下面是一段具体的代码实现：

<div id="div1" draggable="true" ondragstart="drag(event)">
  <p>此处为可拖动div的内容</p>
</div>


<script>
function drag(event) {
  event.dataTransfer.setData("text",event.target.id);
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
}

function allowDrop(event) {
  event.preventDefault();
}
</script>

上述HTML代码中，可拖动的div指定了id为“div1”，并设置了draggable属性为true，表示该元素可被拖动。同时，该div也绑定了ondragstart事件，在开始拖动该元素的时候触发drag函数。

JavaScript的实现代码包含了三个函数，分别为drag、drop和allowDrop。drag函数在开始拖动div的时候被触发，该函数通过event.dataTransfer.setData方法将div的id存储到数据传输对象中，以便在拖动过程中进行数据交换。

drop函数在拖动过程中当鼠标释放时触发，该函数先通过event.preventDefault方法禁止了默认行为（否则浏览器可能会打开拖动的元素），然后通过event.dataTransfer.getData方法获取到存储在数据传输对象中的div的id，并通过document.getElementById方法获取到该div。最后，该函数通过event.target.appendChild方法将div添加到当前鼠标位置的元素中，从而实现了拖动后的效果。

allowDrop函数则是在拖动过程中，当元素进入可以拖放的区域时触发，该函数也使用了event.preventDefault方法禁止了默认行为，从而让drop函数能够正确地执行。

通过上述HTML和JavaScript代码，我们可以方便地实现HTML中可拖动div的功能，从而提高网页的交互性和可视化效果。