CSS3中提供了一種新的功能，可以通過CSS實(shí)現(xiàn)DIV拖動的效果。這種效果在網(wǎng)頁設(shè)計中經(jīng)常用到，可以使頁面更具有互動性和良好的用戶體驗(yàn)。

要實(shí)現(xiàn)DIV拖動的效果，需要用到一些CSS屬性。首先，需要將該元素聲明為可拖動（draggable）元素。這可以通過在CSS中設(shè)置以下代碼實(shí)現(xiàn)：

div {
draggable: true;
}

除此之外，還需要使用一些JavaScript代碼實(shí)現(xiàn)DIV的拖動效果。例如：

var elem = document.getElementById("mydiv");
var posX = 0;
var posY = 0;
elem.addEventListener("mousedown", function(e) {
posX = e.clientX;
posY = e.clientY;
document.addEventListener("mousemove", mousemove);
});
elem.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", mousemove);
});
function mousemove(e) {
var dx = e.clientX - posX;
var dy = e.clientY - posY;
posX = e.clientX;
posY = e.clientY;
elem.style.left = (elem.offsetLeft + dx) + "px";
elem.style.top = (elem.offsetTop + dy) + "px";
}

上面的JavaScript代碼用于實(shí)現(xiàn)DIV元素的拖動功能。首先，需要獲取需要拖動的元素（例如，id為“mydiv”的元素）。然后，通過鼠標(biāo)事件來觸發(fā)拖動事件。在鼠標(biāo)按下后，記錄鼠標(biāo)的坐標(biāo)。接著，添加一個鼠標(biāo)移動事件，用于計算元素移動的距離，并實(shí)時更新元素的位置。最后，在鼠標(biāo)松開后移除鼠標(biāo)移動事件即可。

通過CSS3和JavaScript的組合，可以實(shí)現(xiàn)DIV元素的拖動效果，為網(wǎng)頁設(shè)計帶來更好的用戶體驗(yàn)。