Show Mouse Coordinates On Drag or Mouse Down & Move

June 14, 2017 12:57 pm by ATS Staff

Following is a small piece of code that shows mouse coordinates when you drag the mouse using jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script> 
	$(document).ready(function(){
	    var besideMouse = $('<div style="z-index:10; position:fixed;" id="besideMouse"></div>');
	    $('body').append(besideMouse);
        });
	 
	$(document).mousedown(function () {
	    $(this).mousemove(function (e) {
	       var cpos = { top: e.pageY + 10, left: e.pageX + 10 };
	       $('#besideMouse').offset(cpos);    
	       $("#besideMouse").html(e.pageX + ', '+ e.pageY);
	    });
	}).mouseup(function () {
	    $(this).unbind('mousemove');
	    $("#besideMouse").html('');
	}).mouseout(function () {
	    $(this).unbind('mousemove');
	    $("#besideMouse").html('');
	});
</script>