HTML 实战：用原生 JavaScript 实现可拖动浮动小部件

在 HTML 中实现拖动浮动小部件，可以使用 JavaScript 来处理拖动事件。以下是一个简单的示例，使用原生 JavaScript 实现一个可拖动的浮动元素： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .draggable { position: absolute; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="draggable" id="myDiv"></div> <script> var div = document.getElementById('myDiv'); div.addEventListener('mousedown', function (e) { var offsetX = e.clientX - div.offsetLeft; var offsetY = e.clientY - div.offsetTop; document.addEventListener('mousemove', drag); document.addEventListener('mouseup', stopDrag); function drag(e) { div.style.left = e.clientX - offsetX + 'px'; div.style.top = e.clientY - offsetY + 'px'; } function stopDrag() { document.removeEventListener('mousemove', drag); document.removeEventListener('mouseup', stopDrag); } }); </script> </body> </html> ``` 在上述代码中，我们为可拖动的元素添加了 `mousedown` 事件监听器。当鼠标按下时，计算鼠标指针与元素左上角的偏移量。然后在鼠标移动和松开时，分别处理拖动和停止拖动的逻辑。 ######[AI写代码神器 | 363点数解答 | 2024-11-12 12:54:08]

服务商

更多选项

快捷项

自定义