CSS是前端開發中非常重要的一部分，它可以實現許多功能，比如我們今天要講的“div可拖動”。

首先，在HTML中，我們需要將div定義為可拖動的元素，這可以通過給div添加一個class來實現：

<div class="draggable"></div>

接下來，在CSS中，我們需要將這個class的元素設為可拖動：

.draggable {
position: absolute;  /* 允許元素脫離文檔流 */
cursor: move;  /* 鼠標的形狀 */
}

現在，我們需要為div添加一個鼠標按下事件、鼠標移動事件以及鼠標松開事件。這可以通過JavaScript來實現：

var dragItem = document.querySelector(".draggable");  /* 獲取可拖動的元素 */
/* 鼠標按下事件 */
dragItem.addEventListener("mousedown", function(e) {
currentPosition = {  /* 記錄鼠標按下時div的位置 */
x: e.clientX - dragItem.offsetLeft,  
y: e.clientY - dragItem.offsetTop
};
document.addEventListener("mousemove", move);  /* 監聽鼠標移動事件 */
});
/* 鼠標移動事件 */
function move(e) {
dragItem.style.left = (e.clientX - currentPosition.x) + "px";  /* 設置div的left值 */
dragItem.style.top = (e.clientY - currentPosition.y) + "px";  /* 設置div的top值 */
}
/* 鼠標松開事件 */
document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", move);  /* 取消鼠標移動事件的監聽 */
});

現在，我們已經成功地實現了一個可拖動的div元素！