css 拖动样式 |设置选项列表样式css3

.draggable {
position: absolute;
}
.draggable:hover {
cursor: move;
}

上面的代码定义了一个拖动样式的类.draggable，它的position属性设置为absolute，表示可以通过改变位置实现拖拽。同时，当鼠标悬浮在该元素上时，会显示拖动的小手形状。

let dragItem = document.querySelector(".draggable");
let container = document.querySelector(".parent-container");
let active = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;
container.addEventListener("mousedown", dragStart);
container.addEventListener("mouseup", dragEnd);
container.addEventListener("mousemove", drag);
function dragStart(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target === dragItem) {
active = true;
}
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
active = false;
}
function drag(e) {
if (active) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, dragItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

上面的代码是拖动的核心代码，大家使用原生 JavaScript 实现了拖动操作。其中dragStart、dragEnd和drag分别是拖动开始、结束和拖动中的回调函数。

为了防止鼠标滚动时页面发生滚动，大家需要在drag函数中使用preventDefault()方法来阻止默认事件。同时，为了让元素随着鼠标移动而移动，大家需要动态改变元素的transform属性。

有了上面的代码，大家就可以愉快地实现拖动交互了。在实际项目中，大家可以根据需求来定制拖动的样式和行为，以达到最佳的用户体验。