在javascript中，我們可以通過事件event對象來獲取一些屬性和方法。其中clinetX和clientY這兩個(gè)屬性可以拿到鼠標(biāo)相對于窗口的坐標(biāo)位置，并且是無單位的數(shù)。

在了解了需要的信息下，我們開始今天的主題——拖拽

需要了解事件： onmousedown、onmouseup、onmousemove

需要了解事件對象屬性：clientX、clientY、offsetLeft、offsetTop

下面是實(shí)現(xiàn)代碼

<div></div> // html

css部分

div{

? ? width: 150px;

????height: 150px;

? ? background: red;

? ? position: absolute; // 必須定義

? ? top: 0;

? ? left: 0;

}

js部分? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

// 首先找到我們要拖拽的元素

oDiv = document.getElementsByTagName('div')[0];

// 監(jiān)聽鼠標(biāo)按下事件

oDiv.onmousedown = function(event){

? ? var event = event || window.event //兼容低版本IE

? ? // 鼠標(biāo)按下的時(shí)候記錄鼠標(biāo)在盒子中的位置

? ? var deltaX = event.clientX - oDiv.offsetLeft; // 相對于X軸的偏移量

? ? var deltaY = event.clientY - oDiv.offsetTop; // 相對于Y軸的偏移量

? ? // 給整個(gè)document添加mousemove事件，鼠標(biāo)移動(dòng)時(shí)觸發(fā)

? ? document.onmousemove = function(event2) {? // 為了區(qū)別開上下文event事件對象 定義為event2

????????oDiv.style.left = event2.clientX - deltaX + 'px';

? ??????oDiv.style.top = event2.clientY - deltaY + 'px';

????}????

}

// 監(jiān)聽鼠標(biāo)抬起事件

document.onmouseup = function() {

? ? document.onmousedown = null; // 刪除了監(jiān)聽

}

上面這段代碼就是拖拽的實(shí)現(xiàn)邏輯，偏移量的計(jì)算是為了讓div在鼠標(biāo)移動(dòng)過程中只運(yùn)算div相對于窗口的移動(dòng)距離，而不是鼠標(biāo)。

有什么不足之處，請各位大大指點(diǎn)。