HTML 拖放示例：可移动的红色方块
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id='myDiv' draggable='true'></div>
<pre><code><script>
var myDiv = document.getElementById('myDiv');
var isDragging = false;
var offset = { x: 0, y: 0 };
myDiv.addEventListener('mousedown', function (e) {
isDragging = true;
offset.x = e.clientX - myDiv.offsetLeft;
offset.y = e.clientY - myDiv.offsetTop;
});
document.addEventListener('mouseup', function () {
isDragging = false;
});
document.addEventListener('mousemove', function (e) {
if (isDragging) {
myDiv.style.left = (e.clientX - offset.x) + 'px';
myDiv.style.top = (e.clientY - offset.y) + 'px';
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/qiKF 著作权归作者所有。请勿转载和采集!