拖拽

最新推荐文章于 2024-03-23 15:39:28 发布

ZypooZ

最新推荐文章于 2024-03-23 15:39:28 发布

阅读量139

点赞数

文章标签： javascript css html5

本文链接：https://blog.csdn.net/weixin_54698401/article/details/114600188

版权

拖拽思想

首先鼠标按在拖拽的对象上，求出鼠标到对象的距离，在鼠标移动的过程中，利用鼠标的绝对坐标值减去相对坐标值，求出拖拽对象的坐标值，当拖拽到目的地后，取消移动事件。

伪代码

对象.onmousedown = function(){
            鼠标的相对坐标值
            对象.onmousemove = function(){
                对象.style.left = 鼠标的绝对坐标值 - 相对坐标值 + 'px';
                对象.style.top = 鼠标的绝对坐标值 - 相对坐标值 + 'px'
            }
            对象.onmouseup = function(){
                对象.onmousemove = null;
            }
        }

功能实现

<!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: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var o_box = document.getElementById('box');
        o_box.onmousedown = function(evt){
            var e = evt || window.event;
                var X = e.offsetX;
                var Y = e.offsetY;
            document.onmousemove = function(evt){
                var e = evt || window.event;
                o_box.style.left = e.pageX - X + 'px';
                o_box.style.top = e.pageY - Y + 'px';
            }
            o_box.onmouseup = function(){
                // var e = evt || window.event;
                document.onmousemove = null;
            }
        }
    </script>
</body>
</html>

完美拖拽（带边框，带按原路返回）

<!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'){
                arr.push({left : o_box.offsetLeft,top : o_box.offsetTop});
                //鼠标的相对坐标值
                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);
                    arr = [];
                }
            }, 30);
        }
    </script>
</body>
</html>

ZypooZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖拽

拖拽思想首先鼠标按在拖拽的对象上，求出鼠标到对象的距离，在鼠标移动的过程中，利用鼠标的绝对坐标值减去相对坐标值，求出拖拽对象的坐标值，当拖拽到目的地后，取消移动事件。伪代码对象.onmousedown = function(){ 鼠标的相对坐标值对象.onmousemove = function(){ 对象.style.left = 鼠标的绝对坐标值 - 相对坐标值 + 'px'; 对
复制链接

扫一扫