OLD | NEW |
(Empty) | |
| 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 #box1 { |
| 14 background-color: #ffff00; |
| 15 line-height: 200px; |
| 16 padding: 0px; |
| 17 position: absolute; |
| 18 text-align: center; |
| 19 width: 200px; |
| 20 height: 200px; |
| 21 z-index: -1; |
| 22 } |
| 23 #box2 { |
| 24 background-color: #00ffff; |
| 25 line-height: 200px; |
| 26 padding: 0px; |
| 27 position: absolute; |
| 28 text-align: center; |
| 29 width: 200px; |
| 30 height: 200px; |
| 31 z-index: 1; |
| 32 } |
| 33 </style> |
| 34 |
| 35 <script type="text/javascript"> |
| 36 var dragInfo = { lastX:0, lastY:0, target:null }; |
| 37 |
| 38 function onMouseDown(event) { |
| 39 dragInfo.lastX = event.clientX; |
| 40 dragInfo.lastY = event.clientY; |
| 41 dragInfo.target = event.target; |
| 42 document.addEventListener("mousemove", onMouseMove, true); |
| 43 document.addEventListener("mouseup", onMouseUp, true); |
| 44 event.preventDefault(); |
| 45 } |
| 46 |
| 47 function onMouseMove(event) { |
| 48 deltaX = event.clientX - dragInfo.lastX; |
| 49 deltaY = event.clientY - dragInfo.lastY; |
| 50 dragInfo.lastX = event.clientX; |
| 51 dragInfo.lastY = event.clientY; |
| 52 baseX = parseInt(dragInfo.target.style.left, 10); |
| 53 baseY = parseInt(dragInfo.target.style.top, 10); |
| 54 dragInfo.target.style.left = (baseX + deltaX) + "px"; |
| 55 dragInfo.target.style.top = (baseY + deltaY) + "px"; |
| 56 event.preventDefault(); |
| 57 } |
| 58 |
| 59 function onMouseUp(event) { |
| 60 document.removeEventListener("mousemove", onMouseMove, true); |
| 61 document.removeEventListener("mouseup", onMouseUp, true); |
| 62 event.preventDefault(); |
| 63 } |
| 64 </script> |
| 65 |
| 66 <div id="box1" style="left:0px;top:0px;" |
| 67 onmousedown="onMouseDown(event)">Box #1</div> |
| 68 <embed id="plugin" type="application/x-ppapi-example-flash-topmost" |
| 69 width="400" height="400"/> |
| 70 <div id="box2" style="left:0px;top:100px;" |
| 71 onmousedown="onMouseDown(event)">Box #2</div> |
| 72 |
| 73 </body> |
| 74 </html> |
OLD | NEW |