Day-2-拖拽原理

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

铭心NTeen

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

阅读量116

点赞数

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

本文链接：https://blog.csdn.net/qq_25238675/article/details/103154180

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

拖拽原理

H5拖拽有两个部分组成拖拽元素 + 目标元素

拖拽元素的事件
ondragstart	鼠标按下拖拽元素时触发常用一般在这个事件中存储数据
ondrag	在拖拽元素的过程中持续触发
ondragend	鼠标抬起拖拽元素时触发

目标元素的事件
ondragenter	当鼠标进入目标元素内部触发
ondragover	当鼠标在目标元素上部移动时持续触发常用
ondragleave	当鼠标离开目标元素内部时触发
ondrop	当鼠标在目标元素抬起时触发常用

注：浏览器的默认行为会阻止该事件只要在dragover阻止这个默认行为浏览器就能检测drop事件

 oLeft.ondragover = function(e){
        // console.log('dragover');

        //阻止浏览器默认行为
        e.preventDefault()
    }

示例代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            position:absolute;
            width:100px;
            height:200px;
        }
        #left{
            left:0;
            top:0;
            background-color: hotpink;
        }
        #right{
            right:0;
            top:0;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div id="left">目标区域</div>
<div id="right" draggable="true">拖拽元素</div>
<script>
  
    var oRight = document.getElementById('right')

    var oLeft = document.getElementById('left')
    oRight.ondragstart = function(){
        console.log('dragstart');
    }

    oRight.ondrag = function () {
        console.log('drag');
    }

    oRight.ondragend = function () {
        console.log('dragend');
    }


    oLeft.ondragenter = function(){
        // console.log('dragenter');
    }

    oLeft.ondragover = function(e){
        console.log('dragover');

        //阻止浏览器默认行为
        e.preventDefault()
    }

    oLeft.ondrop = function(){
        console.log('drop');
    }

    oLeft.ondragleave = function(){
        console.log('dragleave');
    }


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

铭心NTeen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day-2-拖拽原理

拖拽原理H5拖拽有两个部分组成拖拽元素 + 目标元素拖拽元素的事件 ondragstart 鼠标按下拖拽元素时触发常用一般在这个事件中存储数据 ondrag 在拖拽元素的过程中持续触发 ondragend 鼠标抬起拖拽元素时触发目标元素的事件 ondragenter 当鼠标进入目标元素内部触发 ...
复制链接

扫一扫

专栏目录