拖拽及拓展

最新推荐文章于 2022-08-27 20:23:10 发布

TishaQin

最新推荐文章于 2022-08-27 20:23:10 发布

阅读量137

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43623871/article/details/99235776

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

1，惯性

<!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>惯性</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #demo {
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="demo"></div>
    <script>
        var div1 = document.getElementById("demo");
        var disX, disY;
        var drag = false; //判断是否可以拖拽
        var timer; //定时器

        function bindEvent() {
            var speedX = 0,
                speedY = 0;//速度
            var lastX = 0,
                lastY = 0;//最后一次的距离

            div1.onmousedown = function (e) {
                var e = e || window.event;
                disX = e.clientX - div1.offsetLeft;
                dixY = e.clientY - div1.offsetTop;
                drag = true;
            }
            document.onmousemove = function (e) {
                var e = e || window.event;
                if (drag) {
                    div1.style.left = e.clientX - disX + "px";
                    div1.style.top = e.clientY - dixY + "px";
                }
                speedX = div1.offsetLeft - lastX;
                speedY = div1.offsetTop - lastY;

                lastX = div1.offsetLeft;
                lastY = div1.offsetTop;
                console.log(speedX + "-------"  + div1.offsetLeft + "-------"+ lastX);
            }
            div1.onmouseup = function () {
                drag = false;
                move(div1, speedX, speedY);

            }
        }

        function move(div, speedX, speedY) {
            clearInterval(timer);
            timer = setInterval(function () {
                speedX *= 0.95;
                speedY *= 0.95;//摩擦系数
                div1.style.left = div.offsetLeft + speedX + "px";
                div1.style.top = div.offsetTop + speedY + "px";
                console.log(div1.style.left + "==========" + div1.style.top);
                if (Math.abs(speedX) < 1) {
                    speedX = 0;
                }
                if (Math.abs(speedY) < 1) {
                    speedY = 0;
                }
                if (speedX == 0 && speedY == 0) {
                    clearInterval(timer);
                }
                console.log(speedX + ">>>" + speedY);
            }, 30);
        }
        bindEvent();
    </script>
</body>

</html>

拖拽物块之后，物块会随着惯性再望前方‘溜’一点距离。
在这里插入图片描述

2，鼠标位置判断

<!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>公式导出鼠标位置判断</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 400px;
            height: 200px;
            background-color: red;
            margin: 200px auto;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        var oBox = document.getElementById('box');
        //判断鼠标在元素上的移入移出（上下左右）
        //mouseenter mouseleave + direction
        function bindEvent() {
            oBox.onmouseenter = function (e) {
                get(e,'in');
            }
            oBox.onmouseleave = function (e) {
                get(e,'out');
            }
        }
        function get(event,state) {
            var d = getDer(event);
            var dir = '';
            switch (d) {
                case 0:
                    dir = '-top';
                    break;
                case 1:
                    dir = '-right';
                    break;
                case 2:
                    dir = '-bottom';
                    break;
                case 3:
                    dir = '-left';
                    break;
            }
            console.log(state + dir);
        }
        function getDer(event) {
            var d;
            var w = oBox.offsetWidth;
            var h = oBox.offsetHeight;
            // 确定坐标系以中心为圆心
            var x = (event.clientX - oBox.offsetLeft - w / 2) * (w > h ? (h / w) : 1);
            var y = (event.clientY - oBox.offsetTop - h / 2) * (h > w ? (w / h) : 1);

            // console.log(x, y);
            // Math.tan2(y,x);//弧度范围 
            //弧度=》角度  Math.tan2(y,x)*(180/Math.PI)
            //(-180~180) + 180 = (0 ~ 360)  
            //Math.tan2(y,x)*(180/Math.PI) + 180
            //top     : -135 ~ -45              -- +180 === 45~135--->1     ->4 ->0
            //right   : 0 ~ 45  -45 ~ 0         -- +180 === 135~225--->2    ->5 ->1
            //bottom  : 45 ~ 135                -- +180 === 225~315--->3    ->6 ->2
            //left    : -180 ~ -135 135 ~180    -- +180 === 315~360--->0  4 -> 3 7-> 3
            //(Math.round((Math.tan2(y,x)*(180/Math.PI) + 180)/90) + 3)%4
            d = (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4;
           // console.log(d);
            return d;
        }
        bindEvent();
    </script>
</body>
</html>

当鼠标从某个方位移进或者移出方块时，有移进或者移出，搭配着上下左右。

在这里插入图片描述

3，拖拽与覆盖

<!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>拖拽与覆盖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
            z-index: 10;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>

<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var body = document.getElementsByTagName('body')[0];
        var disX, disY;
        var drag = false;
        var box2Left = box2.offsetLeft;
        var box2Top = box2.offsetTop;
        var box2Width = box2.offsetWidth;
        var box2Height = box2.offsetHeight;
        var box1Width = box1.offsetWidth;
        var box1Height = box1.offsetHeight;

        function bindEvent() {
            box1.onmousedown = function (e) {
                drag = true;
                var e = e || window.event;
                disX = e.clientX - box1.offsetLeft;
                disY = e.clientY - box1.offsetTop;
            }
            body.onmousemove = function (e) {
                var e = e || window.event;
                if (drag) {
                    box1.style.left = e.clientX - disX + "px";
                    box1.style.top = e.clientY - disY + "px";

                    var box1Left = box1.offsetLeft;
                    var box1Top = box1.offsetTop;
                    var coverWidth = 0,
                        coverHeight = 0; //覆盖高度和宽度
                    if ((box1Left + box1Width >= box2Left) && (box1Left <= box2Left)) {
                        coverWidth = box1Left + box1Width - box2Left;
                    } else if ((box2Left + box2Width >= box1Left) && (box2Left + box2Width <= box1Left + box1Width)) {
                        coverWidth = box2Left + box2Width - box1Left;
                    }

                    if ((box1Top + box1Height >= box2Top) && (box2Top >= box1Top)) {
                        coverHeight = box1Top + box1Height - box2Top;
                    } else if ((box2Top + box2Height >= box1Top) && (box1Top + box1Height >= box2Top + box2Height)) {
                        coverHeight = box2Top + box2Height - box1Top;
                    }
                    console.log(coverWidth * coverHeight);
                }
            }
            box1.onmouseup = function () {
                drag = false;
            }

        }
        bindEvent();
    </script>
</body>

</html>