CSS是一種用來控制網頁樣式的語言。除了控制布局、顏色、字體等方面的設計，CSS還可以實現許多交互效果，比如拖拽這一常見需求。

下面我們來看一下如何使用CSS實現一個div的拖拽效果。

.draggable {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
cursor: move; /*設置鼠標為手型*/
}

首先，我們需要給要拖拽的div添加一個class名，并設置好其樣式。其中，position我們設置為absolute，表示該div可以相對于其父元素進行移動。

同時，我們設置了cursor為move，這樣當鼠標懸停在該div上時會顯示手型，提示用戶可以拖拽移動該元素。

.draggable:active {
cursor: grabbing; /*設置拖動時的鼠標圖標*/
}

接下來，我們需要設置鼠標拖動該div時的效果，我們使用:active偽類實現。當用戶按下鼠標時，該偽類會生效。

我們將cursor的值設置為grabbing，在拖動時會出現拳頭圖標，表示正在拖動中。

.draggable {
/*設置元素初始位置為left: 0px;top: 0px;*/
left: 0px;
top: 0px;
}
.draggable:active {
/*根據鼠標的位置動態改變元素的left和top值*/
left: calc(var(--x) - 50px);
top: calc(var(--y) - 50px);
}

最后，我們需要使用變量來動態改變元素的left和top值。這里我們使用了calc()函數，計算的是鼠標當前位置減去元素寬度或高度的一半。

我們可以通過在容器元素上添加onmousemove事件來獲取鼠標當前位置，然后將值賦給元素的--x和--y變量。

拖拽我哦

最后，在容器元素上添加onmousemove事件，獲取鼠標當前位置并將值賦給--x和--y變量即可。

這樣，我們就成功實現了一個div的拖拽效果啦~