ppapi/examples/flash_topmost/flash_topmost_inner.html

   1 <!DOCTYPE html>
   2 <html>
   3   <!--
   4   Copyright (c) 2012 The Chromium Authors. All rights reserved.
   5   Use of this source code is governed by a BSD-style license that can be
   6   found in the LICENSE file.
   7   -->
   8 <head>
   9   <title>Flash Topmost Check Example/Test</title>
  10 </head>
  11
  12 <style type="text/css">
  13 embed {
  14   position: absolute;
  15 }
  16 #box0 {
  17   background-color: #cccccc;
  18   line-height: 200px;
  19   padding: 0px;
  20   position: absolute;
  21   text-align: center;
  22   width: 2000px;
  23   height: 2000px;
  24   z-index: -2;
  25 }
  26 #box1 {
  27   background-color: #ffff00;
  28   line-height: 200px;
  29   padding: 0px;
  30   position: absolute;
  31   text-align: center;
  32   width: 200px;
  33   height: 200px;
  34   z-index: -1;
  35 }
  36 #box2 {
  37   background-color: #00ffff;
  38   line-height: 200px;
  39   padding: 0px;
  40   position: absolute;
  41   text-align: center;
  42   width: 200px;
  43   height: 200px;
  44   z-index: 1;
  45 }
  46 #box3 {
  47   background-color: #000000;
  48   line-height: 200px;
  49   padding: 0px;
  50   position: absolute;
  51   text-align: center;
  52   width: 2000px;
  53   height: 2000px;
  54   z-index: 2;
  55   visibility: hidden;
  56 }
  57 </style>
  58
  59 <script type="text/javascript">
  60 var dragInfo = { lastX:0, lastY:0, target:null };
  61
  62 function onMouseDown(event) {
  63   dragInfo.lastX = event.clientX;
  64   dragInfo.lastY = event.clientY;
  65   dragInfo.target = event.target;
  66   document.addEventListener("mousemove", onMouseMove, true);
  67   document.addEventListener("mouseup", onMouseUp, true);
  68   event.preventDefault();
  69 }
  70
  71 function onMouseMove(event) {
  72   deltaX = event.clientX - dragInfo.lastX;
  73   deltaY = event.clientY - dragInfo.lastY;
  74   dragInfo.lastX = event.clientX;
  75   dragInfo.lastY = event.clientY;
  76   baseX = parseInt(dragInfo.target.style.left, 10);
  77   baseY = parseInt(dragInfo.target.style.top, 10);
  78   dragInfo.target.style.left = (baseX + deltaX) + "px";
  79   dragInfo.target.style.top = (baseY + deltaY) + "px";
  80   event.preventDefault();
  81 }
  82
  83 function onMouseUp(event) {
  84   document.removeEventListener("mousemove", onMouseMove, true);
  85   document.removeEventListener("mouseup", onMouseUp, true);
  86   event.preventDefault();
  87 }
  88 </script>
  89
  90 <div id="box0" style="left:0px;top:0px;"
  91      onmousedown="onMouseDown(event)">Box #0</div>
  92 <div id="box1" style="left:100px;top:400px;"
  93      onmousedown="onMouseDown(event)">Box #1</div>
  94 <embed id="plugin" type="application/x-ppapi-example-flash-topmost"
  95      width="400" height="400"
  96      style="left:200px;top:400px;" />
  97 <div id="box2" style="left:200px;top:500px;"
  98      onmousedown="onMouseDown(event)">Box #2</div>
  99 <div id="box3" style="left:0px;top:0px;"
 100      onmousedown="onMouseDown(event)">Box #3</div>
 101
 102 </body>
 103 </html>