//獲取到box元素
? ? var box = document.querySelector('.box');
? ? //調(diào)用拖拽功能
? ? drag(box);
? ? //將拖拽功能封裝到drag函數(shù)中漠烧，以便多次調(diào)用
? ? //參數(shù)：開啟拖拽的元素
? ? function drag(obj) {
//點擊box移動box的位置
? ? ? ? obj.onmousedown =function (event) {
//設(shè)置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();
? ? ? ? ? ? }
/*
? ? ? ? ? ? * 當我們拖拽一個網(wǎng)頁中的內(nèi)容時歧蕉，瀏覽器會默認去搜索引擎搜索內(nèi)容? ? ? ? ? ? * 此時會導致拖拽功能的異常顽腾，這個是瀏覽器提供的默認行為? ? ? ? ? ? * 如果不希望這個行為的發(fā)生，則可以通過return false來取消? ? ? ? ? ? * 但是ie8不支持? ? ? ? ? ? * 需要先用setCapture捕獲事件副砍，然后releaseCapture取消事件*/
? ? ? ? ? ? return false;
? ? ? ? }
}
}
