html图片随意拖动怎么实现,HTML 实现随意拖动内容位置
时间: 2024-03-07 08:49:43 浏览: 25
要实现 HTML 页面中图片的随意拖动,可以使用 HTML5 提供的 drag 和 drop API。
具体实现步骤如下:
1. 在 HTML 页面中添加一个图片元素,比如:
```html
<img id="myImg" src="image.jpg" draggable="true">
```
2. 使用 JavaScript 监听图片元素的 dragstart、dragover 和 drop 事件,实现图片的拖动效果,比如:
```javascript
var myImg = document.getElementById('myImg');
myImg.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', event.target.id);
});
myImg.addEventListener('dragover', function(event) {
event.preventDefault();
});
myImg.addEventListener('drop', function(event) {
event.preventDefault();
var data = event.dataTransfer.getData('text/plain');
var draggedImg = document.getElementById(data);
var dropzone = event.target;
dropzone.src = draggedImg.src;
draggedImg.src = event.target.src;
});
```
这段代码会让图片元素可以被拖动,并且可以在页面中随意拖动位置。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)