/*
拖拽流程：
1、第一步點(diǎn)擊需要拖動的元素
2、在點(diǎn)擊下的元素被選中，進(jìn)行move移動
3、當(dāng)鼠標(biāo)彈起的時候，停止動作
4、點(diǎn)擊元素oDIV的時候，可用的是oDIV區(qū)域，而move和up則是全局區(qū)域，也就是整個文檔通用，即應(yīng)該用document
*/
oDIV = document.getElementById("gaga");
oDIV.onmousedown = function( e ){ // 當(dāng)鼠標(biāo)點(diǎn)擊下去的時候
var diffX = e.clientX - oDIV.offsetLeft; // 點(diǎn)擊的位置距離瀏覽器最左邊的位置(clientX) 再減去被點(diǎn)擊元素距離最左邊的位置(oDIV.offetLeft) 在引動的所點(diǎn)擊的元素距離最左邊的位置是不確定的 所以需要這個結(jié)果
var diffY = e.clientY - oDIV.offsetTop; // 點(diǎn)擊的位置距離瀏覽器頂部的位置(clientY) 再減去被點(diǎn)擊元素距離頂部的位置(oDIV.offsetTop) 在引動的所點(diǎn)擊的元素距離頂部的位置是不確定的 所以需要這個結(jié)果
document.onmousemove = function( e ){ // 當(dāng)按下鼠標(biāo)不放的時候
var e = e || window.event;
oDIV.style.top = e.clientY - diffY + "px";
oDIV.style.left = e.clientX - diffX + "px";
};
document.onmouseup = function(){ // 當(dāng)鼠標(biāo)彈起的時候
document.onmousemove = null; // 清空鼠標(biāo)按下鼠標(biāo)不放的事件
document.onmouseup = null; // 清空鼠標(biāo)彈起事件
}
};