以下是一个简单的用JavaScript实现拖拽功能的示例：
HTML代码：
<!DOCTYPE html>
<html>
<head><title>拖拽示例</title><style>#draggable {width: 100px;height: 100px;background-color: red;position: absolute;top: 0;left: 0;}</style>
</head>
<body><div id="draggable"></div><script src="drag.js"></script>
</body>
</html>
JavaScript代码（drag.js）：
var draggable = document.getElementById('draggable');var isDragging = false;
var mouseOffset = { x: 0, y: 0 };draggable.addEventListener('mousedown', function(e) {isDragging = true;// 计算鼠标位置和可拖拽元素左上角的偏移量mouseOffset.x = e.clientX - draggable.offsetLeft;mouseOffset.y = e.clientY - draggable.offsetTop;
});document.addEventListener('mousemove', function(e) {if (isDragging) {// 根据鼠标位置和偏移量计算拖拽元素的新位置var newX = e.clientX - mouseOffset.x;var newY = e.clientY - mouseOffset.y;// 更新拖拽元素的位置draggable.style.left = newX + 'px';draggable.style.top = newY + 'px';}
});document.addEventListener('mouseup', function(e) {isDragging = false;
});
这个示例创建了一个红色的可拖拽元素，当鼠标在元素上按下时，元素会跟随鼠标移动，直到释放鼠标按键。
在这个示例中，我们使用了mousedown、mousemove和mouseup事件来实现拖拽功能。mousedown事件表示鼠标按下时，mousemove事件表示鼠标移动时，mouseup事件表示鼠标释放时。我们监听这些事件，并在合适的时候更新可拖拽元素的位置。使用offsetLeft和offsetTop属性可以获取可拖拽元素相对于其父元素的偏移量，使用style.left和style.top属性可以更新元素的位置。
值得注意的是，我们使用了一个isDragging变量来记录是否正在拖拽，以及一个mouseOffset变量来记录鼠标位置和元素偏移量的差值。这样可以确保元素总是跟随鼠标移动，而不是立即跳到鼠标位置。
