css 实现div可拖动 |css字体名大全

首先，在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元素！