| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| <head> |
| <title>Flash Topmost Check Example/Test</title> |
| </head> |
| |
| <style type="text/css"> |
| embed { |
| position: absolute; |
| } |
| #box0 { |
| background-color: #cccccc; |
| line-height: 200px; |
| padding: 0px; |
| position: absolute; |
| text-align: center; |
| width: 2000px; |
| height: 2000px; |
| z-index: -2; |
| } |
| #box1 { |
| background-color: #ffff00; |
| line-height: 200px; |
| padding: 0px; |
| position: absolute; |
| text-align: center; |
| width: 200px; |
| height: 200px; |
| z-index: -1; |
| } |
| #box2 { |
| background-color: #00ffff; |
| line-height: 200px; |
| padding: 0px; |
| position: absolute; |
| text-align: center; |
| width: 200px; |
| height: 200px; |
| z-index: 1; |
| } |
| #box3 { |
| background-color: #000000; |
| line-height: 200px; |
| padding: 0px; |
| position: absolute; |
| text-align: center; |
| width: 2000px; |
| height: 2000px; |
| z-index: 2; |
| visibility: hidden; |
| } |
| </style> |
| |
| <script type="text/javascript"> |
| var dragInfo = { lastX:0, lastY:0, target:null }; |
| |
| function onMouseDown(event) { |
| dragInfo.lastX = event.clientX; |
| dragInfo.lastY = event.clientY; |
| dragInfo.target = event.target; |
| document.addEventListener("mousemove", onMouseMove, true); |
| document.addEventListener("mouseup", onMouseUp, true); |
| event.preventDefault(); |
| } |
| |
| function onMouseMove(event) { |
| deltaX = event.clientX - dragInfo.lastX; |
| deltaY = event.clientY - dragInfo.lastY; |
| dragInfo.lastX = event.clientX; |
| dragInfo.lastY = event.clientY; |
| baseX = parseInt(dragInfo.target.style.left, 10); |
| baseY = parseInt(dragInfo.target.style.top, 10); |
| dragInfo.target.style.left = (baseX + deltaX) + "px"; |
| dragInfo.target.style.top = (baseY + deltaY) + "px"; |
| event.preventDefault(); |
| } |
| |
| function onMouseUp(event) { |
| document.removeEventListener("mousemove", onMouseMove, true); |
| document.removeEventListener("mouseup", onMouseUp, true); |
| event.preventDefault(); |
| } |
| </script> |
| |
| <div id="box0" style="left:0px;top:0px;" |
| onmousedown="onMouseDown(event)">Box #0</div> |
| <div id="box1" style="left:100px;top:400px;" |
| onmousedown="onMouseDown(event)">Box #1</div> |
| <embed id="plugin" type="application/x-ppapi-example-flash-topmost" |
| width="400" height="400" |
| style="left:200px;top:400px;" /> |
| <div id="box2" style="left:200px;top:500px;" |
| onmousedown="onMouseDown(event)">Box #2</div> |
| <div id="box3" style="left:0px;top:0px;" |
| onmousedown="onMouseDown(event)">Box #3</div> |
| |
| </body> |
| </html> |
