web图片拖拽到指定位置删除
时间: 2023-09-25 18:15:24 浏览: 77
要实现web图片拖拽到指定位置删除,你需要使用HTML5的拖放API和JavaScript编写一些代码。
首先,在HTML中创建一个容器元素,用于接受拖放的图片:
```html
<div id="drop-zone"></div>
```
然后,给这个容器元素添加拖放事件处理程序:
```javascript
var dropZone = document.getElementById('drop-zone');
dropZone.addEventListener('dragover', function(e) {
e.preventDefault();
});
dropZone.addEventListener('drop', function(e) {
e.preventDefault();
// 获取拖放的图片
var file = e.dataTransfer.files[0];
// 创建一个新的Image对象
var img = new Image();
// 加载图片
img.onload = function() {
// 在容器中添加图片
dropZone.appendChild(img);
};
img.src = URL.createObjectURL(file);
});
```
这段代码中,我们注册了`dragover`和`drop`事件处理程序。`dragover`事件处理程序用于阻止浏览器的默认行为,以允许我们进行拖放操作。`drop`事件处理程序用于获取拖放的图片,并将其添加到容器中。
接下来,我们需要添加一个删除按钮,用于删除图片。我们可以在容器中添加一个按钮元素:
```html
<div id="drop-zone">
<button id="delete-btn">删除</button>
</div>
```
然后,我们可以在JavaScript中添加一个点击事件处理程序,用于删除图片:
```javascript
var deleteBtn = document.getElementById('delete-btn');
deleteBtn.addEventListener('click', function() {
// 获取容器中的图片
var img = dropZone.querySelector('img');
// 如果容器中有图片,则删除它
if (img) {
img.remove();
}
});
```
这段代码中,我们注册了一个点击事件处理程序,用于删除容器中的图片。我们首先获取容器中的图片,然后使用`remove`方法将其从容器中删除。
现在,当你拖放一张图片到容器中后,就可以在容器中看到这张图片,并且可以点击删除按钮将其删除。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)