Below is an example of mousemove event handling that has mostly been used with drag & drop. Three DIVs are used to demonstrate in this example, the first one contains a picture on which I’ve performed Drag & Drop to move it’s container. The second one records all the mouse movements with it’s current location and deviation on each single move. The third one is used here to demonstrate a little animation using javascript. Even it can be done with the only javascript, I’ve attached JQuery to make the div run smooth. If you click anywhere in the document the circle object will follow the cursor and if you click and drag the picture object it will move with the cursor. You can also find a live demo link at the bottom of this post for the same.
(Note:Please report any broken link)
#test
{
height:200px;
width:200px;
border-radius:15px 15px 15px 15px;
background:url('https://4.bp.blogspot.com/_Eqdxlws5VV8/SmX2GPB8QhI/AAAAAAAAI1c/PAQvAJlwYso/s400/nursery+web+spider.JPG') no-repeat;
background-size:contain;
box-shadow:0 0 15px 5px red, 0 0 10px 5px silver inset;
background-position:center;
position:relative;
top:10px;
left:10px;
float:left;
z-index:2;
cursor:move;
-webkit-user-select: none;
-moz-user-select: none;
}
#textDiv
{
z-index:1;
height:500px;
width:400px;
float:left;
box-shadow:0 0 15px 5px green, 0 0 10px 5px silver inset;
overflow:auto;
position:relative;
left:40px;
border-radius:15px;
padding-top:20px;
padding-left:20px;
text-align:center;
}
#testDiv
{
box-shadow:0 0 15px 5px blue, 0 0 20px 10px #dedded inset;
height:100px;
width:100px;
float:left;
position:fixed;
background-color:Green;
border-radius:50px;
}
var currentTop;
var currentLeft;
var dragObject;
function mouseUp() {
dragObject = null;
}
function makeDraggable(obj) {
obj = document.getElementById(obj);
obj.onmousedown = function () {
dragObject = this;
currentTop = obj.offsetTop;
currentLeft = obj.offsetLeft;
}
}
function mouseMove(event) {
if (dragObject) {
this.onselectstart = function () { return false; }
var txtDiv = document.getElementById("textDiv");
var theEvent = event ? event : window.event;
var x = theEvent.clientX;
var y = theEvent.clientY;
var moveX = x - currentLeft;
var moveY = y - currentTop;
var adjustX = dragObject.offsetWidth / 2;
var adjustY = dragObject.offsetHeight / 2;
$(dragObject).animate({ left: currentLeft + moveX - adjustX, top: currentTop + moveY - adjustY }, 1);
txtDiv.innerHTML += "Current Position: Top:-"+currentTop+" Left:-"+currentLeft+"
";
txtDiv.innerHTML += "Mouse Moved: X: "+moveX+" | Y: "+moveY+"
";
txtDiv.scrollTop = txtDiv.scrollHeight;
}
}
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
document.onmousedown = mouseDown;
function mouseDown(event) {
var div = document.getElementById("testDiv");
$(div).animate({ top: event.clientY - 50, left: event.clientX - 50 }, 1000, function () { div.style.backgroundColor = get_random_color(); });
}
function get_random_color() {
function c() {
return Math.floor(Math.random() * 256).toString(16)
}
return "#" + c() + c() + c();
}
window.onload = function () {
makeDraggable("test");
}
A working demo is here: DragDropDemo