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