JS原生拖拽

最新推荐文章于 2024-07-10 14:36:18 发布

赤妖碟

最新推荐文章于 2024-07-10 14:36:18 发布

阅读量156

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/ayangdaye/article/details/122357243

版权

<!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>
        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="div1">

    </div>
</body>
<script>
    window.onload = function () {
        var oDiv = document.getElementById("div1");
        tuo(oDiv);
    }
    function tuo(node) {
        node.onmousedown = function (ev) {
            var e = ev || window.event;
            var offsetX = e.clientX - this.offsetLeft;
            var offsetY = e.clientY - this.offsetTop;

            //被拖拽物体保持相对距离和鼠标移动
            document.onmousemove = function (ev) {
                var e = ev || window.event;
                var l = e.clientX - offsetX;
                var t = e.clientY - offsetY;

                var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;

                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //限制出街
                if (l <= 0) {
                    l = 0;
                }
                if (l >= windowWidth - node.offsetWidth) {
                    l = windowWidth - node.offsetWidth;
                }

                if (t <= 0) {
                    t = 0;
                }
                if (t >= windowHeight - node.offsetHeight) {
                    t = windowHeight - node.offsetHeight;
                }



                node.style.left = l + 'px';
                node.style.top = t + 'px';

            }


        }
        //取消拖拽
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    }
</script>

</html>

赤妖碟

关注

0
点赞
踩
0

收藏

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

<!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>D.
复制链接

扫一扫