| <html> |
| <head> |
| <title>BasicMouseInterfaceTest</title> |
| |
| <style> |
| div.solidborder { border-style:solid; border-width:1px; margin: 10px;} |
| #draggable { width: 60px; height: 60px; padding: 0.5em; margin: 10px; } |
| #droppable { width: 75px; height: 75px; padding: 0.5em; margin: 10px; } |
| </style> |
| |
| <link type="text/css" href="https://selenium.dev/selenium/web/css/ui-lightness/jquery-ui-1.12.1.min.css" rel="stylesheet" /> |
| <script type="text/javascript" src="https://selenium.dev/selenium/web/js/jquery-3.5.1.min.js"></script> |
| <script type="text/javascript" src="https://selenium.dev/selenium/web/js/jquery-ui-1.12.1.min.js"></script> |
| <script type="text/javascript"> |
| jQuery(document).ready(function(){ |
| $('#mouse-tracker').mousemove(function(e){ |
| xPos = e.pageX - this.offsetLeft; |
| yPos = e.pageY - this.offsetTop; |
| $('#relative-location').html(xPos + ', ' + yPos); |
| }); |
| }) |
| |
| </script> |
| <script type="text/javascript"> |
| function clickStatus(message) { |
| document.getElementById('click-status').innerHTML = message; |
| } |
| function moveStatus(message) { |
| document.getElementById('move-status').innerHTML = message; |
| } |
| function dropStatus(message) { |
| document.getElementById('drop-status').innerHTML = message; |
| } |
| function relativeStatus(message) { |
| document.getElementById('relative-location').innerHTML = message; |
| } |
| function absoluteStatus(message) { |
| document.getElementById('absolute-location').innerHTML = message; |
| } |
| function tellPos(p){ |
| document.getElementById('absolute-location').innerHTML = p.pageX + ', ' + p.pageY; |
| } |
| function clearAbsolute(p){ |
| document.getElementById('absolute-location').innerHTML = ''; |
| } |
| addEventListener('mousemove', tellPos, false); |
| document.documentElement.addEventListener('mouseleave', clearAbsolute, false); |
| </script> |
| <script type="text/javascript"> |
| $(function () { |
| $("#draggable").draggable(); |
| $("#droppable").droppable({ |
| drop: function (event, ui) { dropStatus("dropped") } |
| }); |
| }); |
| </script> |
| |
| </head> |
| <body> |
| <h2>Mouse Clicks</h2> |
| |
| <p><a href="resultPage.html" id="click">Click for Results Page</a></p> |
| |
| <div> |
| <input type="text" id="clickable" |
| onfocus="clickStatus('focused')" |
| oncontextmenu="clickStatus('context-clicked')" |
| ondblclick="clickStatus('double-clicked')" |
| placeholder="Clickable"/> |
| |
| <strong id="click-status"> </strong> |
| </div> |
| |
| <h2>Drag & Drop</h2> |
| |
| <strong id="drop-status"> </strong> |
| <div id="draggable" class="ui-widget-content">Draggable</div> |
| |
| <div id="droppable" class="ui-widget-header">Droppable</div> |
| |
| <h2>Mouse Position</h2> |
| |
| <div> |
| <input type="button" id="hover" onmouseleave="moveStatus('')" onmouseover="moveStatus('hovered')" value="Hoverable"/> |
| <strong id="move-status"> </strong> |
| </div> |
| |
| <p><strong>Absolute Location: <span id="absolute-location" onmouseleave="absoluteStatus('')"></span></strong></p> |
| <p><strong>Relative Location in Box: <span id="relative-location"></span></strong></p> |
| <div id="mouse-tracker" onmouseleave="relativeStatus('')" class="solidborder" style="position: absolute; height: 200px; width: 200px;"> |
| Move mouse here. |
| </div> |
| <div id="bottom" style="margin-top: 230px;"></div> |
| </body> |
| </html> |
