实现完美拖拽

最新推荐文章于 2024-09-09 09:35:48 发布

风继续吹&

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量95

点赞数 1

文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_48930299/article/details/114599844

版权

完美拖拽点击记录运动轨迹返回原位置

<!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>
        #box{
            width: 300px;
            height: 200px;
            background: #999;
            position: absolute;
            left: 0;
            top: 0;
        }
        .title{
            width: 100%;
            height: 20px;
            background: black;
            position: absolute;
            left: 0;
            top: 0;
        }
        .title span{
            width: 30px;
            height: 20px;
            background: red;
            color: yellow;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 12px;
        }
        .msg{
            width: 100%;
            height: 180px;
            background: yellowgreen;
            position: absolute;
            left: 0;
            top: 20px;
            color: blue;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="title">
            <span>返回</span>
        </div>
        <div class="msg"></div>
    </div>
    <script>
        var o_box = document.querySelector('#box');
        var o_back = document.querySelector('.title span');

        var arr = []; //放置运动轨迹的数组
        
        o_box.onmousedown = function(evt){
            var e = evt || window.event;
            //获取事件源
            var target = e.target || e.srcElement;
            //过滤出标题栏
            if(target.className === 'title'){
                //鼠标的相对坐标值
                var dis_x = e.offsetX;
                var dis_y = e.offsetY;
                document.onmousemove = function(evt){
                    var e = evt || window.event;
                    //先求出left和top值
                    var left = e.pageX - dis_x;
                    var top = e.pageY - dis_y;
                    //设置边界
                    //左边界
                    if(left <= 0){
                        left = 0;
                    }else if(left >= document.documentElement.clientWidth - o_box.offsetWidth){ //右边界
                        left = document.documentElement.clientWidth - o_box.offsetWidth;
                    }
                    if(top <= 0){ //上边界
                        top = 0;
                    }else if(top >= document.documentElement.clientHeight - o_box.offsetHeight){ //下边界
                        top = document.documentElement.clientHeight - o_box.offsetHeight;
                    }
                    //设置盒子的位置
                    o_box.style.left = left + 'px';
                    o_box.style.top = top + 'px';

                    //记录轨迹
                    arr.push({left : o_box.offsetLeft,top : o_box.offsetTop});
                    
                    console.log(arr);
                }
                document.onmouseup = function(){
                    document.onmousemove = null;
                }
                document.ondragstart = function(){
                    return false;
                }
            }
        }
        o_back.onclick = function(){
            var index = arr.length - 1; //最大下标
            //利用计时器逆序遍历数组中的坐标值
            var timer = setInterval(function(){
                o_box.style.left = arr[index].left + 'px';
                o_box.style.top = arr[index --].top + 'px';
                if(index === -1){
                    clearInterval(timer);
                }
            }, 30);
        }
    </script>
</body>
</html>

风继续吹&

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现完美拖拽

完美拖拽点击记录运动轨迹返回原位置<!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">.
复制链接

扫一扫