<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <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"); ev.target.appendChild(document.getElementById(data)) } </script> <style> #tuo{ width: 500px; height: 400px; background-color: #0088cc; } #cun{ width: 500px; height: 400px; background-color: wheat; } </style> </head> <body> <div id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div> <hr> <img src="page_photo.jpg" alt="" id="tuo" draggable="true" οndragstart="drag(event)" width="500" height="400"/> </body> </html>
2016.11.15 HTML5新特性 拖放
最新推荐文章于 2022-10-11 22:38:27 发布