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