HTML5 拖放Drag和drop用法以及事件介绍

weixin_50756332

已于 2023-04-16 14:03:44 修改

阅读量2.2k

点赞数 1

分类专栏：前端小案例文章标签： html5 前端 html

于 2023-03-23 21:23:29 首次发布

本文链接： https://blog.csdn.net/weixin_50756332/article/details/129738580

版权

前端小案例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章介绍了HTML5中的拖拽事件，包括dragstart、drag、dragend、dragenter、dragover、dragleave和drop等，以及如何通过JavaScript监听和处理这些事件。提供了一个示例，展示拖拽图片和元素的效果，包括元素拖动时的视觉反馈和元素放置的处理。

摘要由CSDN通过智能技术生成

dragstart：拖拽开始时在被拖拽元素上触发此事件
drag：拖拽过程中被拖拽的元素会持续不断地发drag事件。
dragend：鼠标在拖放目标上释放时，在拖搜元素上触发，将元素从浏览器拖放到操作系统时不会触发此事件。

dragenter：拖拽鼠标进入元素时在该元素上触发，用于给拖放元素设置视觉反馈，如高亮
dragover：拖拽时鼠标在目标元素上移动时触发
dragleave：拖拽时鼠标移出目标元素时在目标元素上触发
drop：当拖拽元素在目标元素上同时鼠标放开时触发事件息标在拖放目标上释放时在拖放目标上触发此时监听器需要收集数据并且执行所需操作。如果是从操作系统拖放文件到浏览器，需要取消浏览器默认行为。

下面是举例：

测试各个元素的拖拽使用，观察如何执行

<div><img src="./爱宠.webp" alt="" draggable="true"></div>
<span></span>
<script>
    const imgs = document.querySelector('img')
    const spans = document.querySelector('span')
    // 拖拽的元素
    imgs.addEventListener('dragstart',dragstart)
    function dragstart(){
        console.log(`dragstart 执行了~`);
    }
    imgs.addEventListener('drag',drag)
    function drag(){
        console.log('drag 执行了')
    }
    imgs.addEventListener('dragend',dragend)
    function dragend(){
        console.log('dragend 执行了')
    }
</script>

下面是一个小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        html,body{
            height: 100%;
        }
        body {
            background-color: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            width: 200px;
            height: 200px;
            border: 8px solid;
            margin-left: 20px;
        }
        .content {
            width: 184px;/* width: 100px; */
            height: 184px;/* height: 100px; */
            background: url(./flower.jpg) center/cover;
        }
        .hide {
            display: none;
        }
        .active {
            border: 8px dashed #ccc;
            background-color: lightgoldenrodyellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content" draggable="true"></div>
    </div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <script>
        //拖拽的元素
        const content = document.querySelector('.content')
        content.addEventListener('dragstart', dragstart)
        function dragstart(){
            setTimeout(() =>{  //setTimeout可以让元素不要消失得这么快
                this.classList.add('hide')  //当拖拽开始时隐藏该元素
            })
        }
        content.addEventListener('dragend',dragend)
        function dragend(){
            this.classList.remove('hide')  //当拖拽结束时显示该元素
        }
        //目标元素
        const container = document.querySelectorAll('.container')
        container.forEach((item)=>{  
            item.addEventListener('dragleave',dragleave)
            item.addEventListener('dragenter',dragenter)
            item.addEventListener('dragover',dragover)
            item.addEventListener('drop',drop)
        })
        function dragleave() {
            this.classList.remove('active')  //当元素移出该区域时，取消高亮
        }
        function dragenter() {
            this.classList.add('active')  //当元素移动到该区域上时高亮显示
        }
        //drop事件要和dragover事件一起使用才有效果，注意阻止事件
        function dragover(e){
            e.preventDefault();
        }
        function drop(e){  //当拖拽元素在目标元素上同时鼠标放开时，需要将拖拽元素放到这个容器中
            e.preventDefault();
            this.append(content) //将拖拽元素放到这个容器中
        }
    </script>
</body>
</html>

效果如下：

初始时：