html 可拖动浮窗
时间: 2023-09-11 10:10:10 浏览: 92
可以通过HTML5的Draggable属性实现拖动浮窗的效果。例如,可以创建一个div元素,设置draggable属性为true,然后使用JavaScript监听dragstart、drag和dragend事件来处理拖动过程中的行为,如下所示:
```html
<div draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)" ondragend="dragEnd(event)">可拖动的浮窗</div>
<script>
function dragStart(event) {
// 记录拖动开始时的坐标
event.dataTransfer.setData("startX", event.clientX);
event.dataTransfer.setData("startY", event.clientY);
}
function dragging(event) {
// 计算当前拖动的距离
var startX = event.dataTransfer.getData("startX");
var startY = event.dataTransfer.getData("startY");
var distanceX = event.clientX - startX;
var distanceY = event.clientY - startY;
// 移动浮窗
var elem = event.target;
elem.style.left = (elem.offsetLeft + distanceX) + "px";
elem.style.top = (elem.offsetTop + distanceY) + "px";
}
function dragEnd(event) {
// 清除数据
event.dataTransfer.clearData();
}
</script>
```
上面的代码创建了一个可拖动的浮窗,并使用JavaScript实现了拖动的效果。当用户拖动浮窗时,浮窗会跟随鼠标移动,并在拖动结束时停止移动。