拖拽——垃圾桶

最新推荐文章于 2021-06-16 17:11:27 发布

微aa

最新推荐文章于 2021-06-16 17:11:27 发布

阅读量280

点赞数 2

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/ttttqqqqq/article/details/107354873

版权

拖拽的事件（XXX元素被拖拽时，它身上可以发生的事件）：

dragstart 在开始被拖动时触发
dragend 在拖完时触发
drag 在被拖动时触发

接受拖拽的事件（XXX元素被拽到某个地点，该地点发生的事件）：

dragenter 被拖动元素进入到指定地点时触发
dragover 被拖动元素在指定地点内移动时触发
dragleave 被拖动元素没有放下就离开指定地点时触发
drop 被拖动元素在指定地点里放下时触发

这里如果没有if判断会出现一个bug，有兴趣的可以试试看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 这里必须设置宽高，否者无法实现效果 */
            border: 1px solid #333;
            width: 300px;
            height: 200px;
        }
    </style>
</head>
    <div>
        <p>源文件</p>
        <!-- 如果要换测试照片，请在这里换 -->
        <img src="img