<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5拖放</title> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault();//取消默认 } function drag(ev) { //设置被拖数据的数据类型和值 //数据类型是 "Text"，值是可拖动元素的 id ("drag1")。 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> </head> <body> <h1>元素拖放</h1> <br /><br /><br /><br /> <p id="text1" draggable="true" ondragstart="drag(event)" >可以被拖动</p> <div id="panel1" style=" 100px; height: 100px; border: black solid 1px;float: left;margin-left: 100px;" ondrop="drop(event)" ondragover="allowDrop(event)">拖进来啊1</div> <div id="panel2" style=" 100px; height: 100px; border: black solid 1px;float: left;margin-left: 200px;" ondrop="drop(event)" ondragover="allowDrop(event)">拖进来啊2</div> </body> </html>