前端js实现手动拖拽某个元素；
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div Dragging Example</title>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: #f9f9f9;
border: 1px solid #ccc;
cursor: move;
position: absolute;
}
</style>
</head>
<body>
<div id="draggable">Drag me!</div>
<script>
var draggableElement = document.getElementById('draggable');
var dragging = false;
var currentX, currentY;
var initialX, initialY;
draggableElement.addEventListener('mousedown', function(e) {
dragging = true;
initialX = e.clientX - draggableElement.offsetLeft;
initialY = e.clientY - draggableElement.offsetTop;
});
document.addEventListener('mousemove', function(e) {
if (!dragging) return;
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
draggableElement.style.left = currentX + 'px';
draggableElement.style.top = currentY + 'px';
});
document.addEventListener('mouseup', function() {
dragging = false;
});
// 阻止选中文本，以便更顺畅地拖动
draggableElement.addEventListener('selectstart', function(e) {
e.preventDefault();
});
</script>
</body>
</html>
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
