在浏览器可以随意的拖拽，我们来看下怎么实现？
我们具体分析一下步骤：
第一步：鼠标选中需要拖拽的地方，鼠标按下。（需要使用事件onmousedown）
第二步：鼠标按下后，我们接着移动鼠标。（onmousemove）
第三步：鼠标松开，将拖拽的元素固定在那，也就是拖到就到哪。（onmouseup）
现在我们具体看下代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例047</title><style>#box1 {width: 100px;height: 100px;background-color: yellow;position: absolute;}#box2 {width: 100px;height: 100px;background-color: rgb(102, 42, 151);position: absolute;left: 200px;top: 200px;}</style><script>window.onload = function () {var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");/*box1.onmousedown = function (event) {//alert("点击了");box1.setCapture && box1.setCapture();event = event || window.event;var ox = event.clientX - box1.offsetLeft;var oy = event.clientY - box1.offsetTop;document.onmousemove = function (event) {event = event || window.event;var x = event.clientX - ox;var y = event.clientY - oy;box1.style.left = x + "px";box1.style.top = y + "px";};document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;//当鼠标松开时，取消对事件的捕获box1.releaseCapture && box1.releaseCapture();return false;}};*//*把上面的代码封装成一个函数，方便使用*/fun(box1);fun(box2);function fun(obj) {obj.onmousedown = function (event) {//alert("点击了");console.log("点击了~~~~~");obj.setCapture && obj.setCapture();event = event || window.event;var ox = event.clientX - obj.offsetLeft;var oy = event.clientY - obj.offsetTop;document.onmousemove = function (event) {console.log("移动了~~~~~~~");event = event || window.event;var x = event.clientX - ox;var y = event.clientY - oy;obj.style.left = x + "px";obj.style.top = y + "px";};document.onmouseup = function () {console.log("松开了~~~~~~~");document.onmousemove = null;document.onmouseup = null;//当鼠标松开时，取消对事件的捕获obj.releaseCapture && obj.releaseCapture();return false;}};}}; </script>
</head><body><div id="box1"></div><div id="box2"></div>
</body></html>
移动之前的样子：
移动之后：
