wizact/mousemoveelement.html

## mousemoveelement.html
<html>
    <head>
        <style>
        .dv1 {
            display: block;
            position: absolute;
            top: 75px;
            left: 75px;
            width:50px;
            height: 50px;
            background-color: green;
            cursor: move;
        }

        .dv2 {
            display: block;
            position: absolute;
            top: 150px;
            left: 150px;
            width:50px;
            height: 50px;
            background-color: red;
            cursor: move;
        }

        .statView {
            position:absolute;
            left:0px;
            top:0px;
        }

        .container {
            padding: 0px;
            position: relative;
            width: 300px;
            height: 300px;
            background-color: gray;
            top: 70px;
            left: 70px;
            overflow: hidden;
        }
        </style>
    </head>
    <body>
        <div id="stat" class="statView"></div>
        <div id="container" class="container">
            <div class="dv1" id="dv1">
            </div>
            <div class="dv2" id="dv2">
            </div>
        </div>

    <script type="text/javascript">

    var state = false;
    var activeElementToMove = "";
    var prevX = 0, prevY = 0;
    var deltaX = 0, deltaY = 0;

    var handleMouseDown = function(e) {
        console.log("moouse down");
        console.log(e.pageX, e.pageY);
        state = true;
        prevX = e.pageX;
        prevY = e.pageY;
        activeElementToMove = e.currentTarget.id;
        console.log(activeElementToMove);
    }

    var handleMouseMove = function(e) {
        if (state) {

            deltaX = e.pageX - prevX;
            deltaY = e.pageY - prevY;

            var panel = document.getElementById(activeElementToMove);

            var st = document.getElementById("stat");
            st.innerHTML = "Mouse X: " + e.pageX + "- Mouse Y: " + e.pageY + "<br> Prev X: " + prevX + "- Prev Y: " + prevY + "<br> Delta X " + deltaX + "- Delta Y " + deltaY + " <br> Top:" + panel.offsetTop + "- Left: " + panel.offsetLeft;

            panel.style.left = panel.offsetLeft + deltaX + "px";
            panel.style.top = panel.offsetTop + deltaY + "px";

            prevX = e.pageX;
            prevY = e.pageY;

            console.log(deltaX, deltaY);
            console.log(prevX, prevY);
        }
    }

    var handleMouseUp = function(e) {
        state = false;
        console.log("moouse released");
    }

    var panel1 = document.getElementById("dv1");
    panel1.addEventListener('mousedown', handleMouseDown, false);

    var panel2 = document.getElementById("dv2");
    panel2.addEventListener('mousedown', handleMouseDown, false);

    document.addEventListener('mousemove', handleMouseMove, false);
    document.addEventListener('mouseup', handleMouseUp, false);
    </script>
    </body>
</html>
	<html>
	<head>
	<style>
	.dv1 {
	display: block;
	position: absolute;
	top: 75px;
	left: 75px;
	width:50px;
	height: 50px;
	background-color: green;
	cursor: move;
	}

	.dv2 {
	display: block;
	position: absolute;
	top: 150px;
	left: 150px;
	width:50px;
	height: 50px;
	background-color: red;
	cursor: move;
	}

	.statView {
	position:absolute;
	left:0px;
	top:0px;
	}

	.container {
	padding: 0px;
	position: relative;
	width: 300px;
	height: 300px;
	background-color: gray;
	top: 70px;
	left: 70px;
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<div id="stat" class="statView"></div>
	<div id="container" class="container">
	<div class="dv1" id="dv1">
	</div>
	<div class="dv2" id="dv2">
	</div>
	</div>

	<script type="text/javascript">

	var state = false;
	var activeElementToMove = "";
	var prevX = 0, prevY = 0;
	var deltaX = 0, deltaY = 0;

	var handleMouseDown = function(e) {
	console.log("moouse down");
	console.log(e.pageX, e.pageY);
	state = true;
	prevX = e.pageX;
	prevY = e.pageY;
	activeElementToMove = e.currentTarget.id;
	console.log(activeElementToMove);
	}

	var handleMouseMove = function(e) {
	if (state) {

	deltaX = e.pageX - prevX;
	deltaY = e.pageY - prevY;

	var panel = document.getElementById(activeElementToMove);

	var st = document.getElementById("stat");
	st.innerHTML = "Mouse X: " + e.pageX + "- Mouse Y: " + e.pageY + "<br> Prev X: " + prevX + "- Prev Y: " + prevY + "<br> Delta X " + deltaX + "- Delta Y " + deltaY + " <br> Top:" + panel.offsetTop + "- Left: " + panel.offsetLeft;

	panel.style.left = panel.offsetLeft + deltaX + "px";
	panel.style.top = panel.offsetTop + deltaY + "px";

	prevX = e.pageX;
	prevY = e.pageY;

	console.log(deltaX, deltaY);
	console.log(prevX, prevY);
	}
	}

	var handleMouseUp = function(e) {
	state = false;
	console.log("moouse released");
	}

	var panel1 = document.getElementById("dv1");
	panel1.addEventListener('mousedown', handleMouseDown, false);

	var panel2 = document.getElementById("dv2");
	panel2.addEventListener('mousedown', handleMouseDown, false);

	document.addEventListener('mousemove', handleMouseMove, false);
	document.addEventListener('mouseup', handleMouseUp, false);
	</script>
	</body>
	</html>