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

来源：互联网发布：ubuntu u盘挂载路径编辑：程序博客网时间：2024/04/30 15:46

 拖拽框---当鼠标按在指定的区域才可进行拖拽
思想：只有当鼠标是按在一个大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 0