拖拽div控件实战

最新推荐文章于 2023-02-06 15:30:51 发布

吕海青

最新推荐文章于 2023-02-06 15:30:51 发布

阅读量320

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_44659826/article/details/108174574

版权

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

拖拽div控件实战

思路
二、示意图
- 1.代码示例
总结

思路

1、鼠标点击，获取位置 2、鼠标拖动事件，更新位置 3、鼠标松开事件，更新位置

提示：以下是本篇文章正文内容，下面案例可供参考

二、示意图

元素的位移

1.代码示例

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #div1 {
        width: 120px;
        height: 120px;
        background: orange;
        position: absolute;

    }
</style>

<body>
    <div id="div1"></div>
</body>

<script>

    var div1 = document.getElementById('div1');

    // 初始化
    var x; //元素初始位置
    var y;
    var xx;  // 鼠标初始位置
    var yy;
    var mx;  //鼠标现在位置
    var my;
    div1.onmousedown = function (event) {
        var event = event || window.event;
        // 获取元素对象初始的位置
        x = this.offsetLeft;
        y = this.offsetTop;
        // 获取鼠标的初始位置
        xx = event.clientX;
        yy = event.clientY;

        var dx = xx - x;
        var dy = yy - y;
        // 鼠标移动
        document.onmousemove = function (event) {

            // 获取鼠标的位置
            mx = event.clientX;
            my = event.clientY;
            // 鼠标的前后两次的移动位移差
            _x = mx - dx;
            _y = my - dx;

            // 不让div出去
            // 上面和左面
            if (_x <= 0) {
                _x = 0
            }
            if (_y <= 0) {
                _y = 0;
            }
            // 左面 和 右面
                 // 获取元素的信息
            var div1_size = div1.getBoundingClientRect();
            var div1_width = div1_size.width;
            var div1_height = div1_size.height;
                // 获取文档页面大小
            var doc_cli_width = document.documentElement.clientWidth;
            var doc_cli_height = document.documentElement.clientHeight;
                 // 差
            var cha_width = doc_cli_width - div1_width;
            var cha_height = doc_cli_height - div1_height;
                 // 获取元素的left top
            if (_x >= cha_width) {
                _x = cha_width
            }
            if (_y >= cha_height) {
                _y = cha_height
            }
            // 设置div的位置
            // 只有div1.style.top可以设置
            div1.style.top = _y + 'px';
            div1.style.left = _x + 'px';
        }

        // 鼠标抬起来
        div1.onmouseup = function (event) {
            document.onmousemove = null;
            // 获取鼠标的位置
            mx = event.clientX;
            my = event.clientY;
            // 鼠标的前后两次的移动位移差
            _x = mx - dx;
            _y = my - dy;

            // 设置div的位置
            // 只有div1.style.top可以设置
            div1.style.top = _y + 'px';
            div1.style.left = _x + 'px';

        }
    }


</script>

</html>

总结

1、元素的: style.left = clientX2 - clientX1 + offsetleft
2、document.documentElement.clientWidth || document.body.clientWidth 获取文档可视区域的宽度
3、var vv = div1.getBoundingClientRect() 获取元素的信息
vv.width // vv.height
4、拖动事件:

document,onmousemove = function(  //代码	}

吕海青

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录