鼠標(biāo)拖拽div css是一種非常方便的操作方式，它可以讓用戶輕松拖動div元素，實(shí)現(xiàn)頁面中的各種交互效果。下面來看一下如何實(shí)現(xiàn)鼠標(biāo)拖拽div css。

div {
position: absolute; //將元素的定位方式設(shè)為絕對定位
}
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function (event) {
var disX = event.clientX - oDiv.offsetLeft;
var disY = event.clientY - oDiv.offsetTop;
//獲取鼠標(biāo)點(diǎn)擊時(shí)相對于div元素的坐標(biāo)值
document.onmousemove = function (event) {
var left = event.clientX - disX;
var top = event.clientY - disY;
//計(jì)算出div元素應(yīng)該移動的位置
oDiv.style.left = left + 'px';
oDiv.style.top = top + 'px';
//設(shè)置div元素的新位置
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
//取消事件監(jiān)聽
};
};

上面的代碼中，我們首先將div元素的定位方式設(shè)置為絕對定位，然后在鼠標(biāo)按下時(shí)獲取到鼠標(biāo)點(diǎn)擊時(shí)相對于div元素的坐標(biāo)值，之后在鼠標(biāo)移動時(shí)計(jì)算出div元素應(yīng)該移動的位置，最后設(shè)置div元素的新位置。當(dāng)鼠標(biāo)松開時(shí)，取消事件監(jiān)聽即可。

通過鼠標(biāo)拖拽div css，我們可以實(shí)現(xiàn)很多有趣的效果，比如拖拽圖片、改變元素大小等等。在實(shí)際項(xiàng)目中，如果需要使用鼠標(biāo)拖拽div css，可以直接使用上述代碼作為參考，在自己的代碼中進(jìn)行相應(yīng)的調(diào)整即可。