sdk/platform-tools/systrace/catapult/telemetry/telemetry/internal/testing/draggable.html

   1 <html>
   2   <head>
   3     <style>
   4       body { margin: 0; }
   5       #drag_div {
   6         width: 100%;
   7         height: 100%;
   8         background: blue;
   9         position: relative;
  10       }
  11     </style>
  12     <script>
  13     offsetX = 0;
  14     offsetY = 0;
  15
  16     function drag(event) {
  17       d = document.getElementById('drag_div');
  18       offsetX = event.clientX - d.offsetLeft;
  19       offsetY = event.clientY - d.offsetTop;
  20     }
  21
  22     function drop(event) {
  23       d = document.getElementById('drag_div');
  24       d.style.left = event.clientX - offsetX;
  25       d.style.top = event.clientY - offsetY;
  26     }
  27
  28     function touchStart(event) {
  29       d = document.getElementById('drag_div');
  30       offsetX = event.touches[0].clientX - d.offsetLeft;
  31       offsetY = event.touches[0].clientY - d.offsetTop;
  32     }
  33
  34     function touchEnd(event) {
  35       d = document.getElementById('drag_div');
  36       d.style.left = event.changedTouches[0].clientX - offsetX;
  37       d.style.top = event.changedTouches[0].clientY - offsetY;
  38     }
  39
  40     </script>
  41   </head>
  42
  43   <body id ="body">
  44     <div id="drag_div"> </div>
  45   </body>
  46   <script>
  47   document.getElementById('body').addEventListener('mouseup', drop);
  48   document.getElementById('body').addEventListener('touchend', touchEnd);
  49   document.getElementById('drag_div').addEventListener('mousedown', drag);
  50   document.getElementById('drag_div').addEventListener('touchstart', touchStart);
  51   </script>
  52 </html>