注意事项：
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>JS——拖拽盒子
原文地址：http://www.cnblogs.com/wuqiuxue/p/7978076.html