如何让img在div中自由拖拽

可以使用HTML5中的draggable属性来实现在div中自由拖拽img元素。具体实现方法如下：

1. 首先，在img标签中添加draggable属性，将其设为true，表示该元素可被拖拽：

<img src="image.jpg" draggable="true" />

2. 在父元素div中添加以下三个事件处理程序：

<div ondragover="allowDrop(event)" ondrop="drop(event)" ondragstart="drag(event)">
  <img src="image.jpg" draggable="true" />
</div>

其中，ondragover事件处理程序用于防止默认行为，ondrop事件处理程序用于在拖拽结束时执行操作，ondragstart事件处理程序用于在拖拽开始时执行操作。

3. 在JavaScript中实现以上三个事件的具体操作，代码如下：

function allowDrop(event) {
  event.preventDefault();
}

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));
}

其中，allowDrop()函数用于阻止默认行为，drag()函数用于在拖拽开始时将被拖拽元素的ID保存到dataTransfer对象中，drop()函数用于在拖拽结束时获取dataTransfer对象中保存的元素ID，并将该元素添加到目标容器中。

通过以上步骤，就可以在div中自由拖拽img元素了。