HTML中的拖拉框----在路上（29）

最新推荐文章于 2024-04-09 17:34:36 发布

小尾巴的梦

最新推荐文章于 2024-04-09 17:34:36 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qq_36995398/article/details/54094654

版权

 
 
  
   拖拽框---当鼠标按在指定的区域才可进行拖拽
 
 
思想：只有当鼠标是按在一个大div里的小div才可拖拽，其他不可；拖拽框有多种方法，这里以其中一种分享；
下面使我自己写的demo，简单有效供分享，不足之处望提议，不胜感激。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
简单的设置一下样式，样式可自己随意设置

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            width:500px;
            height:300px;
            background:red;
            position: absolute;
            top:100px;
            left: 100px;
        }
        .h{
            width: 100%;
            height: 20px;
            line-height: 20px;
            background: pink;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
  <div class="a"><h5 class="h">鼠标按着这里才可拖动</h5></div>
  <script>
      var na=document.getElementsByClassName("a")[0];
      var h=na.children[0];
      na.onmousedown=function (event) {
          if(event.pageY-na.offsetTop<=h.offsetHeight){
                  var x=event.pageX-this.offsetLeft;
                  var y=event.pageY-this.offsetTop;
                  document.onmousemove=function (event){
                      na .style.left=event.pageX-x+"px";
                      na.style.top=event.pageY-y+"px";
                  }
                  na.onmouseup=function () {
                  document.onmousemove=null;
                  };
              }
          else {
              h.style.display="block";
               }
      }

  </script>
</body>
</html>

效果图如下：

小尾巴的梦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML中的拖拉框----在路上（29）

拖拽框---当鼠标按在指定的区域才可进行拖拽思想：只有当鼠标是按在一个大div里的小div才可拖拽，其他不可；拖拽框有多种方法，这里以其中一种分享；下面使我自己写的demo，简单有效供分享，不足之处望提议，不胜感激。DOCTYPE html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>简单
复制链接

扫一扫