首页用JavaScript实现拖动div到另一个div，拖放后改变被拖动div的宽度及内容

用JavaScript实现拖动div到另一个div，拖放后改变被拖动div的宽度及内容

时间: 2023-09-08 22:12:40 浏览: 167

可以使用JavaScript的Drag and Drop API来实现拖动div到另一个div的效果。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <style> #div1, #div2 { width: 200px; height: 100px; padding: 10px; border: 1px solid black; margin: 10px; } </style> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <p>拖动我</p> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); var draggedElement = document.getElementById(data); var target = ev.target; if (target.id === 'div2') { target.appendChild(draggedElement); draggedElement.style.width = '300px'; draggedElement.innerHTML = '内容已改变'; } } </script> </body> </html> ``` 在上面的代码中，我们有两个div，一个是可拖动的div（id为"div1"），另一个是目标div（id为"div2"）。当我们拖动"div1"到"div2"上时，会触发`drop`事件，然后在`drop`事件处理程序中，我们将被拖动的div添加到目标div中，并改变其宽度和内容。请注意，这段代码仅是一个示例，你可以根据自己的需求进行修改和扩展。

阅读全文