html5 拖拽

最新推荐文章于 2021-06-07 13:26:03 发布

Jason–json

最新推荐文章于 2021-06-07 13:26:03 发布

阅读量183

点赞数 1

文章标签： h5 javascript css html html5

本文链接：https://blog.csdn.net/weixin_46146313/article/details/104181031

版权

拖拽属性是H5新特性：是指是指鼠标点击事件源后不松手，将其拖拽到目标对象或半途松手（释放）的过程
源对象：指的鼠标点击的一个事件，例如，一个图片，一个元素
目标对象：是指我们拖动源对象后，预计要进入的区域
1.被拖动的对象可以触发的方法

ondragstart:事件源可以被拖动
ondrag:被拖动过程中
ondragend:源对象被拖动结束

源对象进入目标对象可以触发的事件

ondragenter：源对象进入目标对象时触发
ondragover：源对象悬停在目标对象时触发
ondragleave：源对象被拖动着离开目标对象时触发
ondrop：源对象在目标对象上松手时触发
event.dataTransfer：数据传递对象
功能：用于在源对象和目标对象之间传递数据（拖动时使用）

setData(): 设置数据参数是 key 和 value(value必须是字符串)
getData(): 获取数据，参数是key 。通过key去获取对应的value值
标签中自带的属性：
draggable 是否可以拖拽，默认值 false，些成true才能被拖动

<!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>h5拖拽</title>
    <style>
    .box{
        width: 200px;
        height: 200px;
        background-color: pink;
        position: absolute;
    }
    </style>
</head>
<body>
    
    <div class="box" draggable="true"></div>
    <script>
        var box = document.getElementsByClassName("box")[0];
        var x; //全局，储存鼠标的位置
        var y;

        //开始拖动
        box.ondragstart = function(ev){
            x = ev.offsetX;
            y = ev.offsetY;
            
            console.log(x);
            console.log(y)
        }
        // 源对象被拖动时
        box.ondrag = function(ev){
            var a = ev.clientX;
            var b = ev.clientY;

        if(a == 0 && b == 0){
            return false; //直接结束
        }
        
        a -= x;
        b -= y;
        this.style.left = a + "px";
        this.style.top = b + "px"
        }

         box.ondragend = function (ev) {
            alert("拖动结束");
        }   

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