h5 元素 鼠标长按可拖动
时间: 2023-08-08 14:12:30 浏览: 51
可以使用HTML5的draggable属性来实现鼠标长按可拖动的效果。具体实现步骤如下:
1. 在目标元素上设置draggable属性为true。
2. 监听元素的dragstart、dragover和drop事件,在事件处理函数中设置元素位置。
3. 在CSS中设置元素的position为absolute或fixed,以便在拖动时可以脱离文档流。
下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 100px;
height: 100px;
background-color: #ccc;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box" draggable="true"></div>
<script>
var box = document.getElementById('box');
var startX, startY, offsetX, offsetY;
box.addEventListener('dragstart', function(e) {
startX = e.clientX;
startY = e.clientY;
e.dataTransfer.setData('text/plain', 'dragging');
});
box.addEventListener('dragover', function(e) {
offsetX = e.clientX - startX;
offsetY = e.clientY - startY;
box.style.left = box.offsetLeft + offsetX + 'px';
box.style.top = box.offsetTop + offsetY + 'px';
startX = e.clientX;
startY = e.clientY;
});
box.addEventListener('drop', function(e) {
e.preventDefault();
});
</script>
</body>
</html>
```
以上代码实现了一个可拖动的方块,当鼠标长按方块并拖动时,方块跟随鼠标移动。