JavaScript拖拽

小文又困了

已于 2023-09-21 19:31:15 修改

阅读量97

点赞数 2

分类专栏： Javascript学习文章标签： javascript 开发语言前端

于 2023-09-20 21:00:36 首次发布

本文链接：https://blog.csdn.net/weixin_58528567/article/details/133098670

版权

Javascript学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

让一个长宽100px的div 在一个长宽为600px的div中拖拽并且判断边界值

HTML部分

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

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

        .box1 {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            margin: 50px auto;
            position: relative;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            cursor: move;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
 </body>

</html>

JavaScript部分

    <script>
       // 获取元素  
        var box2 = document.querySelector('.box2')
        //初始化
        init()
        function init() {
            handleDown()
            handleUp()
        }
  
        // 绑定按下事件
        function handleDown() {
            box2.onmousedown = function (e) {
            //兼容写法
            //作用：记录当次事件触发的时候的所有信息 保存在一个对象里面的
                var e = e || window.event
                //offsetX,offsetY
                //以当前触发的目标元素的内边框的左上角为坐标原点
                var w = e.offsetX
                var h = e.offsetY
                handleMove(w, h)
            }
        }
        // 绑定移动事件
        function handleMove(w, h) {
            document.onmousemove = function (e) {
                var e = e || window.event
                //pageX,pageY
                //以当前document文档的左上角为坐标原点 
                var x = e.pageX - w - box2.offsetParent.offsetLeft
                var y = e.pageY - h - box2.offsetParent.offsetTop
//box2.offsetParent.offsetLeft,box2.offsetParent.offsetTop
//求的是box1的相对位置

                // 判断边界值
                //让box2不能脱离box1边界
                if (x < 50) {
                    x = 0
                }else if(x >box2.offsetParent.offsetWidth -  box2.offsetWidth){
                //box1的宽度-box2的宽度，剩下的宽度就是边界
                //box2.offsetParent.offsetWidth=box1.offsetWidth
                       x = box2.offsetParent.offsetWidth -  box2.offsetWidth
               //如果触碰到边界，那么就让box2的左距离等于box1的宽度-box2的宽度
                }
                if (y < 50) {
                    y = 0
                }else if(y>box2.offsetParent.offsetHeight - box2.offsetHeight){
                      y  =  box2.offsetParent.offsetHeight - box2.offsetHeight
                }

                box2.style.left = x + 'px'
                box2.style.top = y + 'px'
            }
        }
        
		// 绑定抬起事件
		//鼠标抬起时，鼠标移动事件为空取消
      function handleUp() {
            document.onmouseup = function () {
                document.onmousemove = null
            }
        }
    </script>