div可移動的css

div是HTML中最基本的模塊。通常，通過css中的各種樣式來控制div的大小、背景顏色、邊框、圓角等樣式。但是，有時候我們需要讓div具有可移動性，即用戶可以通過鼠標拖拽div進行位置調整。

實現可移動的div需要使用css中的position屬性。在設置position屬性時，有四個值可選：static、relative、absolute、fixed。其中，absolute和fixed位置屬性可以通過left和top值來設置div的位置。這樣，我們就可以通過Javascript或JQuery在鼠標拖拽事件的回調函數中獲取鼠標當前位置，進而實時更新div的位置，實現可移動div效果。

以下是實現可移動div的示例代碼：

<div style="position: absolute; width: 200px; height: 200px; background-color: #ccc;" id="myDiv"></div>
<script>
var div = document.getElementById("myDiv");
var isDragging = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
div.addEventListener("mousedown", dragStart);
div.addEventListener("mouseup", dragEnd);
div.addEventListener("mousemove", drag);
function dragStart(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target === div) {
isDragging = true;
}
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
isDragging = false;
}
function drag(e) {
if (isDragging) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, div);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
</script>

這段代碼可以創建一個200*200像素的灰色div，并實現可拖拽移動。運行效果如下：