【H5】拖拽7事件：

最新推荐文章于 2024-08-08 23:38:27 发布

舜岳

最新推荐文章于 2024-08-08 23:38:27 发布

阅读量706

点赞数

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

本文链接：https://blog.csdn.net/qq_41614928/article/details/90340423

版权

HTML5 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

【H5】拖拽7事件

被拖拽元素事件：

ondragstart 拖拽开始的时触发 (触发一次)
ondrag 连续触发拖拽事件
ondragend 拖拽结束触发 (触发一次)

拖拽进入的元素事件：

ondragenter 鼠标进入目标元素内触发 (触发一次)
ondragover 鼠标在目标元素内持续触发
ondragleave 鼠标离开目标元素时触发事件 (触发一次)
ondrop 鼠标在目标元素上抬起时触发 (触发一次)

以下是效果图：

在这里插入图片描述

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{margin:0;padding:0;}
    html,body{
        width:100%;
        height:100%;
        display: flex;
        justify-content:space-between; 
    }
    div{
        width:100px;
        height:150px;
        user-select: none;
        color: #fff;
        line-height: 150px;
        text-align: center;
    }
    #left{
        background-color: deeppink;
    }
    #right{
        background-color: #90f;
    }

</style>
</head>
<body>

<div id="left">目标元素</div>
<div id="right" draggable="true">拖拽元素</div>

<script>
    //    七个h5的拖拽事件：
    const left = document.getElementById('left')
    const right = document.getElementById('right')
    let num = 0;

    //ondragstart  拖拽开始的时候，进行移动；变绿色
    right.ondragstart = function(){
        console.log("开始拖拽时触发")
        this.style.backgroundColor = "#0f0"
    }
    //ondrag  连续触发拖拽事件；
    right.ondrag = function(){
        console.log("主人正在拖拽我")
    }
    //ondragend  拖拽结束 变灰色
    right.ondragend = function(){
        console.log("拖拽结束")
        this.style.backgroundColor = '#ccc'
    }
    //ondragenter  目标拖拽元素：被迫进行反应；是结合拖拽元素进行反应；
    left.ondragenter = function(){
        console.log('进入目标元素')
        this.innerHTML = "释放鼠标";
    }
    //ondragover  持续触发的过程
    left.ondragover = function(e){
        console.log("在目标元素内")
        e.preventDefault();	//阻止默认事件
        e.stopPropagation();//阻止冒泡事件
        return false;
    }
    //ondragleave    拖拽离开时触发事件；
    left.ondragleave = function(){
        console.log('离开目标元素')
        this.innerHTML = "请拖入进来！";
    }
    left.ondrop = function(){
        console.log("在left的div内,鼠标抬起")
        document.body.removeChild(right);
    }

</script>
</body>
</html>