test.html 981 B

123456789101112131415161718192021222324252627282930313233343536
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. #Box1{
  8. width:200px;
  9. height:100px;
  10. padding:10px;
  11. border:1px #ccc dashed;
  12. float:left;
  13. margin-right:10px;
  14. }
  15. </style>
  16. <script>
  17. function AllowDrop(event){
  18. event.preventDefault();
  19. }
  20. function Drag(event){
  21. event.dataTransfer.setData("text",event.currentTarget.id);
  22. }
  23. function Drop(event){
  24. event.preventDefault();
  25. var data=event.dataTransfer.getData("text");
  26. event.currentTarget.appendChild(document.getElementById(data));
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <div id="Box1" ondrop="Drop(event)" ondragover="AllowDrop(event)"></div>
  32. <img id="Img1" src="../static/img/battery.png" draggable="true" ondragstart="Drag(event)">
  33. <div style="clear:both;"></div>
  34. </body>
  35. </html>