Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
draw a DIV on the page according to the mouse movement - with "SAVING" of the last state (div size) on the next mousedown - complete web-page.html
<!doctype html>
<html itemscope="" itemtype="" dir="ltr" lang="en-US" language="English" charset="UTF-8" encoding="UTF-8">
<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">
@charset "UTF-8";
@namespace "";
box-sizing: border-box;
text-size-adjust: auto;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font: 20pt 'Courier New', monospace;
background: none lightblue;
<script type="application/javascript">
var body = document.querySelector("body");
var div = document.createElement("div"); = "position:absolute;border:1px solid red;";
var last_mousedown = null;
function mousedown_handler(ev){
if(null !== last_mousedown){ //"save" DIV sized until next mousedown.
body.onmousemove = null; //stop accepting input from mousemove.
mousemove_handler(ev); //re-use the function with mousedown-information.
last_mousedown = null; //marking "end session", until next mousedown.
last_mousedown = ev;
body.onmousemove = mousemove_handler;
function mousemove_handler(ev){
if(ev.clientY < last_mousedown.clientY){ = ev.clientY + "px"; = (last_mousedown.clientY - ev.clientY) + "px";
}else{ = last_mousedown.clientY + "px"; = (ev.clientY - last_mousedown.clientY) + "px";
if(ev.clientX < last_mousedown.clientX){ = ev.clientX + "px"; = (last_mousedown.clientX - ev.clientX) + "px";
}else{ = last_mousedown.clientX + "px"; = (ev.clientX - last_mousedown.clientX) + "px";
body.onmousedown = mousedown_handler;
body.onmousemove = mousemove_handler;
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.