首页利用JS中鼠标拖拽事件生成一段可运行的html文件

利用JS中鼠标拖拽事件生成一段可运行的html文件

时间: 2023-05-23 18:06:07 浏览: 74

A： ```html <!DOCTYPE html> <html> <head> <title>Drag and Drop Example</title> <style> #drag-box { width: 200px; height: 200px; background-color: yellow; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div id="drag-box"></div> <script> var dragBox = document.getElementById("drag-box"); dragBox.addEventListener("mousedown", mouseDownHandler); dragBox.addEventListener("mouseup", mouseUpHandler); function mouseDownHandler(e) { window.addEventListener("mousemove", mouseMoveHandler); } function mouseUpHandler(e) { window.removeEventListener("mousemove", mouseMoveHandler); } function mouseMoveHandler(e) { dragBox.style.left = e.clientX + "px"; dragBox.style.top = e.clientY + "px"; } </script> </body> </html> ``` 在这段代码中，我们创建了一个黄色的容器`<div>`，并给它设置了固定的宽度和高度、背景颜色和位置（居中显示）。我们给这个容器添加了`mousedown`和`mouseup`事件监听器，分别表示鼠标按下和抬起。当鼠标按下时，我们添加了一个`mousemove`事件监听器，用于监听鼠标移动事件，并在事件处理函数中更新容器的位置，使其跟随鼠标移动。这样就完成了一个简单的拖拽效果。需要注意的是，这段代码只是一个示例，实际应用中还需要进行一些兼容性处理和界面优化。