<body>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.square {
position: relative;
top: 0;
box-sizing: border-box;
width: 150px;
height: 150px;
padding: 10px;
cursor: move;
color: white;
background: coral;
}
.square:active {
transform: rotate3d(-1, 1, 0, 10deg);
}
</style>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<div class="square"></div>
<script>
init('.square');
function init(elem) {
var
$square = $(elem),
press = false,
ofsY,
ofsX;
$square.on('mousedown mouseup mouseleave', function(event) {
press = pressState(event);
ofsY = event.pageY - $square.offset().top;
ofsX = event.pageX - $square.offset().left;
});
function pressState(event) {
if (event.type === 'mousedown') {
return true;
}
return false;
}
$('body').mousemove(function(event) {
$square.html('y: ' + event.pageY + ' x: ' + event.pageX);
if (press) {
$square.css({
'margin-top': event.pageY - ofsY,
'margin-left': event.pageX - ofsX
});
}
});
}
</script>
</body>