近年來，可拖動的Div越來越受到網(wǎng)頁設計者的歡迎。這個效果不僅美觀而且實用，能夠提高用戶的體驗。今天，我們就來一起學習CSS實現(xiàn)可拖動的Div的方法。 首先我們需要創(chuàng)建一個Div塊，然后給它設置一個CSS屬性position，值設置為absolute。這是因為只有設置絕對定位之后，才能使用top、left等屬性對Div進行定位和拖動。我們可以將這個Div命名為“dragDiv”：

.dragDiv {
position: absolute;
top: 100px;
left: 100px;
}

然后，我們需要給這個Div添加一些JavaScript事件，以實現(xiàn)拖動功能。在拖動開始時，我們需要獲取鼠標相對于Div的位置，并為此設置一個變量。我們可以使用JavaScript的“mousedown”事件響應這個操作：

var dragging = false;
var iX, iY;
document.getElementById('dragDiv').onmousedown = function(e) {
dragging = true;
iX = e.clientX - this.offsetLeft;
iY = e.clientY - this.offsetTop;
this.style.cursor = 'move';
return false;
};

其中，e.clientX和e.clientY是鼠標指針的坐標，this.offsetLeft和this.offsetTop是Div的相對位置。 在拖動中，我們需要移動的是這個Div的位置。我們可以在JavaScript的“mousemove”事件里處理Div的位置變化，并隨時更新它：

document.onmousemove = function(e) {
if (dragging) {
var e = e || window.event;
var oX = e.clientX - iX;
var oY = e.clientY - iY;
document.getElementById('dragDiv').style.left = oX + 'px';
document.getElementById('dragDiv').style.top = oY + 'px';
return false;
}
};

最后，在拖動結束后，我們需要停止拖動并還原Div的樣式。我們可以在JavaScript的“mouseup”事件里完成這個任務：

document.onmouseup = function(e) {
dragging = false;
document.getElementById('dragDiv').style.cursor = 'default';
};

這樣，在mousedown、mousemove、mouseup三個事件的配合下，我們就實現(xiàn)了可拖動的Div了。總結一下，實現(xiàn)可拖動的Div主要是通過設置CSS樣式實現(xiàn)絕對定位，然后利用JavaScript的事件響應機制實現(xiàn)拖動效果，是一項非常實用的技術，值得大家掌握。