Crazykk1449

HTML Moveable Image

Mar 20th, 2017
110
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.83 KB | None | 0 0
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <style>
  5. #div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10, #div11, #div12, #div13, #div14 {
  6.     float: left;
  7.     width: 35px;
  8.     height: 35px;
  9.     margin: 10px;
  10.     padding: 10px;
  11.     border: 1px solid black;
  12. }
  13. </style>
  14. <script>
  15. function allowDrop(ev) {
  16.     ev.preventDefault();
  17. }
  18.  
  19. function drag(ev) {
  20.     ev.dataTransfer.setData("text", ev.target.id);
  21. }
  22.  
  23. function drop(ev) {
  24.     ev.preventDefault();
  25.     var data = ev.dataTransfer.getData("text");
  26.     ev.target.appendChild(document.getElementById(data));
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  32.  
  33. <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Square-symbol.svg/2000px-Square-symbol.svg.png" draggable="true" ondragstart="drag(event)" id="drag1" width="35" height="35">
  34.  
  35. </div>
  36. <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  37. <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  38. <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  39. <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  40. <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  41. <div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  42. <div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  43. <div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  44. <div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  45. <div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  46. <div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  47. <div id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  48. <div id="div14" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  49.  
  50. </body>
  51.  
  52. </html>
Add Comment
Please, Sign In to add comment