注意事项：
1、opacity是全部元素变透明，rgba只是背景色变透明
2、先是注册鼠标按下的事件，此时就需要记录鼠标在盒子中的坐标
3、再在鼠标按下事件中注册鼠标移动事件，此时鼠标的坐标是不断变化的，盒子的坐标就是鼠标的坐标减去鼠标在盒子的坐标
4、top.onmousemove = function (ev) {}，top也可以换成document，主要考虑的是鼠标移动的太快出了盒子，改为document可以继续维持这个事件
5、在top.onmousemove中必须取消文本被选中，不然拖拽的时候，如果选中了文字，会出现bug，选中的文字会首先被拖走，影响效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .box { width: 200px; height: 180px; background-color: #ccc; position: absolute; top: 100px; left: 200px; } .top { height: 30px; text-align: center; font: 400 15px/30px "simsun"; background-color: pink; cursor: move; } </style> </head> <body> <div class="box"> <div class="top">点击此处拖拽盒子</div> </div> <script> var box = document.getElementsByTagName("div")[0]; var top = box.children[0]; //点击盒子 然后拖拽 //鼠标左键点击事件 鼠标移动事件 top.onmousedown = function (ev) { ev = ev || window.event; //1、鼠标的坐标 var pageX = ev.pageX || scroll().left + ev.clientX; var pageY = ev.pageY || scroll().top + ev.clientY; //2、鼠标在盒子中的坐标 var x = pageX - box.offsetLeft; var y = pageY - box.offsetTop; top.onmousemove = function (ev) { //3、进入onmousemove事件，鼠标左边不断更新 var pageX = ev.pageX || scroll().left + ev.clientX; var pageY = ev.pageY || scroll().top + ev.clientY; ev = ev || window.event; box.style.left = pageX - x + "px"; box.style.top = pageY - y + "px"; box.style.opacity = 0.4; //取消文本被选中 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } } //解绑 top.onmouseup = function () { top.onmousemove = null; box.style.opacity = 1; } function scroll() { return { "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop, "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft }; } </script> </body> </html>
