HTML5拖动代码
HTML5拖动代码如下：
<!DOCTYPE html>
<html>
<head>
<title>HTML5拖动示例</title>
<style>
#drag {
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
cursor: move;
position: absolute;
top: 50px;
left: 50px;
}
</style>
<script>
window.onload = function() {
var drag = document.getElementById('drag');
var startX = 0;
var startY = 0;
var offsetX = 0;
var offsetY = 0;
var isDragging = false;
drag.addEventListener('mousedown', function(e) {
startX = e.pageX;
startY = e.pageY;
offsetX = drag.offsetLeft;
offsetY = drag.offsetTop;
isDragging = true;
});
document.addEventListener('mousemove', function(e) {
if (isDragging) {
var deltaX = e.pageX - startX;
var deltaY = e.pageY - startY;
drag.style.left = (offsetX + deltaX) + 'px';
drag.style.top = (offsetY + deltaY) + 'px';
}
});
document.addEventListener('mouseup', function(e) {
isDragging = false;
});
}
</script>
</head>
<body>
<div id="drag">拖动我</div>
</body>
</html>
此示例中，我们创建了一个蓝色的正方形，使其可以被拖动。我们使用JavaScript来实现拖动的功能，当鼠标按下、移动和抬起时都会触发不同的事件。我们通过记录鼠标按下时的位置和元素的偏移量，计算出元素的新位置，并将其应用于元素的CSS样式中，以实现拖动的效果。
原文地址: https://www.cveoy.top/t/topic/bFB0 著作权归作者所有。请勿转载和采集!