<html> <meta charset="utf-8"> <script> //规定被拖动的数据 function tdwhat(ev,obj) { ev.dataTransfer.setData("text",ev.target.id); ev.dataTransfer.setData("myval",obj); } function tding(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("text"); var data1=ev.dataTransfer.getData("myval"); ev.target.appendChild(document.getElementById(data)); alert(data1); } function fxtd(ev) { ev.preventDefault(); } </script> <body> <div id="t1" ondrop="tding(event)" ondragover="fxtd(event)" style="border:1px;200px;height:100px;background:green;"> <div id="f1" draggable="true" style="background:yellow;" ondragstart="tdwhat(event,'yellow')"> 被拖动块</div> <div id="f2" draggable="true" style="background:gray;" ondragstart="tdwhat(event,'gray')"> 被拖动块</div> </div> <div id="t2" ondrop="tding(event)" ondragover="fxtd(event)" style="border:1px;200px;height:100px;background:red;"> </div> </body> </html>