javascript拖动例子
封面图
•
2026-01-09
•
JavaScript
215
0
0
0
下面是一个简单的 **JavaScript 拖动(Drag and Drop)示例**,使用原生的 HTML 和 JavaScript 实现。这个例子中,你可以拖动一个元素到另一个区域。 --- ### ✅ 示例:可拖动的元素 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JavaScript 拖动示例</title> <style> #dragBox { width: 100px; height: 100px; background-color: lightblue; border: 2px solid #333; cursor: move; } #dropZone { width: 300px; height: 200px; border: 2px dashed #999; margin-top: 20px; padding: 10px; text-align: center; } </style> </head> <body> <div id="dragBox" draggable="true">拖动我</div> <div id="dropZone">拖到这里</div> <script> const dragBox = document.getElementById('dragBox'); const dropZone = document.getElementById('dropZone'); // 拖动开始时 dragBox.addEventListener('dragstart', function (event) { event.dataTransfer.setData('text/plain', this.id); // 设置拖拽数据 }); // 拖动进入目标区域时 dropZone.addEventListener('dragover', function (event) { event.preventDefault(); // 防止默认行为(允许放置) }); // 放置时 dropZone.addEventListener('drop', function (event) { event.preventDefault(); const data = event.dataTransfer.getData('text/plain'); // 获取拖拽的数据 const draggedElement = document.getElementById(data); this.appendChild(draggedElement); }); </script> </body> </html> ``` --- ### 📝 功能说明: - `draggable="true"`:让元素可以被拖动。 - `dragstart`:当用户开始拖动元素时触发。 - `dragover`:当拖动的元素在目标区域上方时触发(需要 `preventDefault()` 才能接受放置)。 - `drop`:当元素被放置在目标区域时触发。 - `dataTransfer.setData()`:设置拖动时传递的数据。 - `dataTransfer.getData()`:获取拖动时传递的数据。 --- ### 📦 如果你想用更高级的功能(比如拖动排序、拖动图片等),可以使用 [jQuery UI Draggable](https://jqueryui.com/draggable/) 或 [HTML5 Drag API](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API)。 --- 如果你有特定需求(如拖动排序、拖动到其他元素、拖动图片等),欢迎告诉我,我可以提供更详细的代码!
上一篇:
Javascript获取父页的值
下一篇:
javascript刷新当前页面
标题录入,一次不能超过6条
留言
评论