html5实现多个图片拖拽代码
时间: 2024-05-15 20:18:20 浏览: 31
以下是一个简单的 HTML5 实现多个图片拖拽的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Drag and Drop multiple Images</title>
</head>
<body>
<h1>HTML5 Drag and Drop multiple Images</h1>
<div id="images">
<img src="image1.jpg" draggable="true" ondragstart="drag(event)" id="img1">
<img src="image2.jpg" draggable="true" ondragstart="drag(event)" id="img2">
<img src="image3.jpg" draggable="true" ondragstart="drag(event)" id="img3">
</div>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var img = document.getElementById(data);
ev.target.appendChild(img);
}
</script>
</body>
</html>
```
说明:
1. 通过设置 `draggable="true"` 属性,将图片设置为可拖拽的;
2. 通过设置 `ondragstart="drag(event)"` 事件,实现在拖拽开始时将图片的 id 存放在 event.dataTransfer 对象中;
3. 通过设置 `ondragover="allowDrop(event)"` 事件,防止拖放操作默认被浏览器拒绝;
4. 通过设置 `ondrop="drop(event)"` 事件,实现将被拖拽的图片放置到拖放目标位置上。在 drop 事件中,可以通过 `ev.dataTransfer.getData("text")` 获取被拖拽图片的 id,通过 `document.getElementById(data)` 获取被拖拽的图片元素,并将其 append 到目标位置上。