| <html> |
| <head> |
| <style> |
| body { margin: 0; } |
| #drag_div { |
| width: 100%; |
| height: 100%; |
| background: blue; |
| position: relative; |
| } |
| </style> |
| <script> |
| offsetX = 0; |
| offsetY = 0; |
| |
| function drag(event) { |
| d = document.getElementById('drag_div'); |
| offsetX = event.clientX - d.offsetLeft; |
| offsetY = event.clientY - d.offsetTop; |
| } |
| |
| function drop(event) { |
| d = document.getElementById('drag_div'); |
| d.style.left = event.clientX - offsetX; |
| d.style.top = event.clientY - offsetY; |
| } |
| |
| function touchStart(event) { |
| d = document.getElementById('drag_div'); |
| offsetX = event.touches[0].clientX - d.offsetLeft; |
| offsetY = event.touches[0].clientY - d.offsetTop; |
| } |
| |
| function touchEnd(event) { |
| d = document.getElementById('drag_div'); |
| d.style.left = event.changedTouches[0].clientX - offsetX; |
| d.style.top = event.changedTouches[0].clientY - offsetY; |
| } |
| |
| </script> |
| </head> |
| |
| <body id ="body"> |
| <div id="drag_div"> </div> |
| </body> |
| <script> |
| document.getElementById('body').addEventListener('mouseup', drop); |
| document.getElementById('body').addEventListener('touchend', touchEnd); |
| document.getElementById('drag_div').addEventListener('mousedown', drag); |
| document.getElementById('drag_div').addEventListener('touchstart', touchStart); |
| </script> |
| </html> |
