html实现任意拖拽div

可以通过HTML5的Drag and Drop API来实现任意拖拽div的功能。具体实现步骤如下：

1. 在HTML中定义一个可拖拽的div元素，例如：

<div draggable="true" id="dragElement">拖拽我</div>

2. 在JavaScript中监听dragstart、dragover、dragend等事件，例如：

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

dragElement.addEventListener("dragstart", function(event) {
  // 设置被拖拽元素的数据
  event.dataTransfer.setData("text/plain", event.target.id);
});

document.addEventListener("dragover", function(event) {
  // 阻止默认行为，允许放置
  event.preventDefault();
});

document.addEventListener("drop", function(event) {
  // 获取被拖拽元素的数据
  var data = event.dataTransfer.getData("text/plain");
  var draggedElement = document.getElementById(data);
  
  // 移动被拖拽元素到放置位置
  draggedElement.parentNode.removeChild(draggedElement);
  event.target.appendChild(draggedElement);
});

3. 在CSS中定义可拖拽元素的样式，例如：

#dragElement {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  cursor: move;
}

这样就可以实现任意拖拽div的功能了。