<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 500px; height: 300px; background: pink; } </style> </head> <body> <div></div> <span class="word" draggable="true">123</span> <img src="1.png" style="width:100px" οndrag="fn(event,this)"> <script> var word=document.getElementsByClassName("word")[0]; var img=document.getElementsByTagName("img")[0]; var div=document.getElementsByTagName("div")[0]; function fn(e,that) { let ev=e||window.event; ev.dataTransfer.setData("text",that.src); } div.οndragοver=function (e) { let ev=e||window.event; ev.preventDefault(); }; div.οndrοp=function (e) { let ev=e||window.event; let oimg=document.createElement("img"); oimg.src=ev.dataTransfer.getData("text"); div.appendChild(oimg); } </script> </body> </html>
画布拖放
最新推荐文章于 2024-06-27 15:04:50 发布