<div class="container">
<div class="box" draggable="true" id="box"><img src="https://fakeimg.pl/100x100/"></div>
</div>.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 10px;
top: 10px;
color: white;
}
.container {
height: 100vh;
}
[draggable="true"] {
user-select: none;
user-select: none;
user-select: none;
user-select: none;
}
var box = document.getElementById('box');
var mouseoverTop = '';
var mouseoverLeft = '';
function dragOverFu (e) {
box.style.top = e.clientY - mouseoverTop + 'px';
box.style.left = e.clientX - mouseoverLeft + 'px';
}
function getdrag (e) {
mouseoverTop = e.clientY - box.style.top.replace('px','');
mouseoverLeft = e.clientX - box.style.left.replace('px','');
console.log(box.style.left.replace('px',''));
}
document.addEventListener('dragstart',getdrag);
document.addEventListener('dragover',dragOverFu);
External CSS
This Pen doesn't use any external CSS resources.