拖拽图案案例

最新推荐文章于 2024-07-08 16:22:29 发布

7束QW

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量123

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/v8min/article/details/109188803

版权

如何让盒子被鼠标拖动

<!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;
        }

        .nav {
            height: 30px;
            background: #036663;
            border-bottom: 1px solid #369;
            line-height: 30px;
            padding-left: 30px;
        }

        .nav a {
            color: #fff;
            text-align: center;
            font-size: 14px;
            text-decoration: none;

        }

        .d-box {
            width: 400px;
            height: 300px;
            border: 5px solid #eee;
            /* 设置阴影 */
            box-shadow: 2px 2px 2px 2px #666;
            position: absolute;
            top: 40%;
            left: 40%;
            background-color: white;

            /* 不让文字被选中 */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .hd {
            width: 100%;
            height: 25px;
            background-color: #7c9299;
            border-bottom: 1px solid #369;
            line-height: 25px;
            color: white;
            cursor: move;
        }

        #box_close {
            float: right;
            cursor: pointer;
        }
    </style>


</head>
<body>
    
 <div class="nav">
        <a href="javascript:;" id="register">注册信息</a>
    </div>
    <div class="d-box" id="d_box">
        <div class="hd" id="drop">注册信息 (可以拖拽)
            <span id="box_close">【关闭】</span>
        </div>
        <div class="bd"></div>
    </div>
    <script>
        //获取数据
        var boxs =document.getElementById('d_box')
        var drop = document.getElementById('drop')
        var boxclose = document.getElementById('box_close')
//给drop添加按下事件
       drop.onmousedown = function(e) {
           //鼠标在盒子中的距离 = 鼠标在页面中的距离  - 盒子在页面中的距离
          var  X = e.pageX - boxs.offsetLeft
          var  Y = e.pageY - boxs.offsetTop

        //鼠标移动事件
          document.onmousemove = function(e) { //这里用document  不用boxs 因为盒子的移动是在页面中
              //移动后盒子距离浏览器边缘的距离 = 鼠标在页面中的距离 - 鼠标在盒子中的距离
            boxsX = e.pageX - X
            boxsY = e.pageY - Y
            boxs.style.left = boxsX + 'px'
            boxs.style.top = boxsY + 'px'
        }
       }
       //松开鼠标之后不移动
       drop.onmouseup = function () {
           document.onmousemove = null //松开鼠标之后我们不想让它再移动   那么就要把前面的清空
       }
       //注册关闭按钮
       boxclose.onclick = function() {
           boxs.style.display = 'none' //把它隐藏了
       }
      
    </script>
</body>
</html>

7束QW

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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> <style> * {
复制链接

扫一扫