Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
draw a DIV on the page according to the mouse movement - complete web-page.html
<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" dir="ltr" lang="en-US" language="English" charset="UTF-8" encoding="UTF-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="fragment" content="!"/>
<meta name="viewport" content="height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,minimal-ui"/>
<style type="text/css" media="all">
/*<![CDATA[*/
@charset "UTF-8";
@namespace "http://www.w3.org/1999/xhtml";
*{
box-sizing: border-box;
text-size-adjust: auto;
}
html,body{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
html{
font: 20pt 'Courier New', monospace;
}
body{
background: none lightblue;
}
/*]]>*/
</style>
</head>
<body>
<script type="application/javascript">
var body = document.querySelector("body");
var div = document.createElement("div");
div.style = "position:absolute;border:1px solid red;";
body.appendChild(div);
var last_mousedown = null;
body.onmousedown = function(ev){last_mousedown = ev;};
body.onmousemove = function(ev){
if(ev.clientY < last_mousedown.clientY){
div.style.top = ev.clientY + "px";
div.style.height = (last_mousedown.clientY - ev.clientY) + "px";
}else{
div.style.top = last_mousedown.clientY + "px";
div.style.height = (ev.clientY - last_mousedown.clientY) + "px";
}
if(ev.clientX < last_mousedown.clientX){
div.style.left = ev.clientX + "px";
div.style.width = (last_mousedown.clientX - ev.clientX) + "px";
}else{
div.style.left = last_mousedown.clientX + "px";
div.style.width = (ev.clientX - last_mousedown.clientX) + "px";
}
//console.log(ev.pageX,ev.clientX);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.