HTML5中的拖拽以及使用原生js实现拖拽效果

最新推荐文章于 2023-07-07 15:43:28 发布

小白张幺幺

最新推荐文章于 2023-07-07 15:43:28 发布

阅读量751

点赞数

分类专栏： HTML5+CSS3 文章标签： html5

本文链接：https://blog.csdn.net/zzh1251994430/article/details/109750642

版权

本文介绍了HTML5中的拖拽功能，包括拖拽元素的设置和相关事件监听，如ondragstart、ondragend等。详细讲解了拖拽基础案例和如何在不同元素间进行拖拽。此外，还通过原生JavaScript实现了简单拖拽和带悬停效果的拖拽效果，涉及offsetLeft、offsetTop、clientX和clientY等坐标属性的应用。

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

HTML5中的拖拽以及使用原生js实现拖拽效果

1. HTML5中的拖拽

1.1 相关知识

拖拽元素：可以为元素添加draggable="true"来让元素能够被拖拽。

拖拽元素的事件监听：（应用于拖拽元素）

ondragstart：当拖拽开始时调用
ondragleave：当鼠标离开拖拽元素时调用
ondragend：当拖拽结束时调用
ondrag：整个拖拽过程都会调用

目标元素：把元素A拖拽到元素B里，那么元素B就是目标元素。页面中任何一个元素都可以成为目标元素。

目标元素的事件监听：（应用于目标元素）

ondragenter：当拖拽元素进入时调用
ondragover：当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
ondrop：当在目标元素上松开鼠标时调用
ondragleave：当鼠标离开目标元素时调用

如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventDefault()这一行代码。

1.2 拖拽基础案例

例：

<!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>
            .box {
    
                width: 200px;
                height: 200px;
                background: green;
            }
            .box2 {
    
                position: relative;
                left: 300px;
                top: 50px;
                width: 300px;
                height: 300px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="box" draggable="true"></div>
        <div class="box2"></div>
        <script>
            // HTML5 拖拽
            // 应用于拖拽元素
            var box = document.querySelector('.box')
            box.ondragstart = function () {
    
                console.log('拖拽开始')
            }
            box.ondragleave = function () {
    
                console.log('鼠标离开元素')
            }
            box.ondragend = function () {
    
                console.log('拖拽结束')
            }
            // box.ondrag = function () {
    
            //     console.log('在拖拽');
            // }
            // 应用于目标元素（想把 box 拖拽进去的地方）
            var box2 = document.querySelector('.box2')
            box2.ondragenter = function () {
    
                console.log('进来了')
            }
            box2.ondragleave = function () {
    
                console.log('离开了')
            }
            // 当拖拽元素在 目标元素上时，连续触发
            box2.ondragover = function (e) {
    
                // 如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventDefault()这一行代码。
                e.preventDefault()
                console.