//获取到box元素
var box = document.querySelector('.box');
//调用拖拽功能
drag(box);
//将拖拽功能封装到drag函数中，以便多次调用
//参数：开启拖拽的元素
function drag(obj) {
//点击box移动box的位置
obj.onmousedown =function (event) {
//设置box捕获所有鼠标按下的事件，只有ie支持
obj.setCapture && box.setCapture();
//获取box元素的偏移量
var boxLeft = event.clientX - obj.offsetLeft;
var boxTop = event.clientY - obj.offsetTop;
//鼠标移动时，box跟着移动
document.onmousemove =function (event) {
//获取鼠标的坐标
event = event || window.event;
var x = event.clientX - boxLeft;
var y = event.clientY - boxTop;
//改变box的位置,box跟着鼠标移动
obj.style.left = x +'px';
obj.style.top = y +'px';
}
//鼠标松开时，box停止移动
document.onmouseup =function () {
document.onmousemove =null;
document.onmouseup =null;
//当鼠标松开，取消对事件的捕获
obj.releaseCapture && obj.releaseCapyure();
}
/*
* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎搜索内容 * 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为 * 如果不希望这个行为的发生，则可以通过return false来取消 * 但是ie8不支持 * 需要先用setCapture捕获事件，然后releaseCapture取消事件*/
return false;
}
}
}
