JS-拖拽-CFANZ编程社区

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           #d1{
               width: 300px;
               height: 300px;
               border: 1px solid red;
           }
       </style>
   </head>
   <body>
       
       <div id="d1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
       
       <img id="img1" src="../img/饭团.png"
       draggable="true" οndragstart="drag(event)" width="100px" height="100px">
   </body>
   <script type="text/javascript">

       function drag(e){
           e.dataTransfer.setData("text1",e.target.id);
       }

       function allowDrop(e){
           // 阻止浏览器无法拖动的问题
           e.preventDefault();
       }
       function drop(e){
           //接收数据
var data=e.dataTransfer.getData("text1");
           e.target.appendChild(document.getElementById(data));
       }
   </script>
</html>