JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="mydiv">
</div>
<span id="coords">x, y</span>
</body>
CSS
#mydiv {
width: 300px;
height: 300px;
background-color: #dddddd;
border: none;
}
JavaScript
var mouseIsDown = false;
function fireThis(e) {
if (mouseIsDown === false)
return;
var parentOffset = $(this).parent().offset();
var x = e.pageX - parentOffset.left;
var y = e.pageY - parentOffset.top;
console.log(mouseIsDown);
$('#coords').html(x + ', ' + y);
}
$('#mydiv').on('mousedown', function() {
mouseIsDown = true;
});
$('#mydiv').on('mouseup', function() {
mouseIsDown = false;
});
$('#mydiv').on('mousemove', fireThis);
$('#mydiv').on('mouseout', function() {
mouseIsDown = false;
});