HTML5图片拖动代码
以下是一个简单的HTML5图片拖动代码，该代码使用JavaScript实现：
<!DOCTYPE html>
<html>
<head>
<title>HTML5图片拖动示例</title>
<style type="text/css">
#image {
position: absolute;
left: 0px;
top: 0px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var image = document.getElementById('image');
image.addEventListener('dragstart', dragStart, false);
image.addEventListener('dragend', dragEnd, false);
}
function dragStart(event) {
event.dataTransfer.setData('image/png', this.id);
}
function dragEnd(event) {
var image = event.target;
image.style.left = (event.clientX - image.offsetWidth / 2) + 'px';
image.style.top = (event.clientY - image.offsetHeight / 2) + 'px';
}
</script>
</head>
<body>
<img id="image" src="image.png" draggable="true" />
</body>
</html>
在上面的代码中，我们首先在HTML文档中定义了一个可拖动的图片，该图片的id为“image”，并且将其属性“draggable”设置为“true”，这样就可以使用HTML5拖放API来拖动它。
接下来，我们使用JavaScript为该图片添加了两个事件监听器：dragstart和dragend。
当用户开始拖动图片时，dragstart事件被触发，并且我们使用“setData”方法将图片的ID存储在DataTransfer对象中。
当用户释放鼠标按钮并完成拖动操作时，dragend事件被触发，并且我们使用事件对象的clientX和clientY属性来获取鼠标释放的位置。然后，我们将图片的位置设置为该位置减去图片宽度和高度的一半，这样图片就会居中于鼠标释放的位置。
这就是一个简单的HTML5图片拖动代码，可以在现代浏览器中运行。
原文地址: https://www.cveoy.top/t/topic/bFCg 著作权归作者所有。请勿转载和采集!