html5让多个图片多个容器实现拖放,一个容器放置一个图片的代码
时间: 2024-05-14 17:15:50 浏览: 16
可以使用HTML5的拖放API来实现多个图片和容器的拖放交互。以下是一个示例代码:
HTML代码:
```
<div id="container1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="container2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="img1" src="image1.jpg" draggable="true" ondragstart="drag(event)">
<img id="img2" src="image2.jpg" draggable="true" ondragstart="drag(event)">
```
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");
var targetId = event.target.id;
var target = document.getElementById(targetId);
var source = document.getElementById(data);
target.appendChild(source);
}
```
在这个示例中,我们创建了两个容器和两个可拖放的图片。只需要设置图片的draggable属性为true,并且在drag事件中指定要拖动的数据。在放置数据时,我们可以在drop事件中获取到拖动的数据,并且将其移到目标容器中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)