Home | History | Annotate | Download | only in flash_topmost 
      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>
    104