步骤：
1.为将要拖拽的元素设置允许拖拽，并赋予dragstart事件将其id转换成数据保存；
2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置，并赋予drop事件进行元素的放置。
<html> <head> <meta charset="utf-8"> <style> .box1 { width: 100px; height: 100px; border: 1px black solid; margin-bottom: 20px; background: lightblue; } .box2 { width: 100px; height: 100px; border: 1px black solid; background: lightcoral; } </style> </head> <body> <!-- 参数要传入event对象 --> <div class="box1" οndragοver="allowdrop(event)" οndrοp="drop(event)"> <img src="img/2.jpg" alt="00" draggable="true" οndragstart="drag(event)" id="drag" width="50" height="50"> <span>我是盒子一</span> </div> <div class="box2" οndragοver="allowdrop(event)" οndrοp="drop(event)"> <span>我是盒子二</span></div> <script> function allowdrop(e) { e.preventDefault(); } function drop(e) { e.preventDefault(); var data = e.dataTransfer.getData("text"); e.target.appendChild(document.getElementById(data)); } function drag(e) { e.dataTransfer.setData("text", e.target.id); } </script> </body> </html>转载于:https://www.cnblogs.com/angle-xiu/p/11204512.html
相关资源：H5实现拖动验证码.zip