--活着，得做点儿什么。
Life is sail trip full of chances and challenges.

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

                拖拽框---当鼠标按在指定的区域才可进行拖拽

思想：只有当鼠标是按在一个大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>


 效果图如下：




 







		

		
posted @ 
2017-01-04 14:37 
小尾巴的梦 
阅读(916) 
评论(0) 
编辑 
收藏 
举报