Decode,
корректировка ещё добавлена влево и вверх небольшая
и -18 это размер курсора чтобы точно курсор на место клика попадал.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
html, body { margin: 0; padding: 0; }
body{
position: relative;
}
#field {
background: url(https://js.cx/drag-heroes/field.png);
width: 800px;
height: 600px;
float: left;
}
.hero {
border: #FF0000 1px solid;
background: url(https://js.cx/drag-heroes/heroes.png);
width: 130px;
height: 128px;
float: left;
}
#hero1 { background-position: 0 0; }
#hero2 { background-position: 0 -128px; }
#hero3 { background-position: -120px 0; }
#hero4 { background-position: -125px -128px; }
#hero5 { background-position: -248px -128px; }
#hero6 { background-position: -244px 0; }
.draggable { cursor: crosshair; }
</style>
</head>
<body>
<h2>Расставьте супергероев по полю.</h2>
<p>Супергерои и мяч -- это элементы с классом "draggable". Сделайте так, чтобы их можно было переносить.</p>
<p>Важно: если супергероя подносят к низу или верху страницы, она должна автоматически прокручиваться. Если страница помещается на вашем экране целиком и не имеет вертикальной прокрутки -- сделайте окно браузера меньше, чтобы протестировать эту возможность.</p>
<p>Да, и ещё: супергерои ни при каких условиях не должны попасть за край экрана.</p>
<div id="field"></div>
<div class="hero draggable" id="hero1"></div>
<div class="hero draggable" id="hero2"></div>
<div class="hero draggable" id="hero3"></div>
<div class="hero draggable" id="hero4"></div>
<div class="hero draggable" id="hero5"></div>
<div class="hero draggable" id="hero6"></div>
<img src="https://js.cx/drag-heroes/ball.png" class="draggable" />
<div style="clear:both"></div>
<script>
var shiftX, shiftY;
document.onmousedown = function(event) {
var target = event.target;
if( !target.classList.contains('draggable') ) return;
var mousePos = getMousePos(target, event);
shiftX = mousePos.x ;
shiftY = mousePos.y;
target.style.cssFloat = 'none';
target.style.position = 'absolute';
moveAt(target, event)
document.body.appendChild(target);
document.onmousemove = function(event) {
moveAt(target, event);
};
target.onmouseup = function() {
document.onmousemove = this.onmouseup = null;
};
return false;
};
function moveAt(elem, event) {
var left = event.pageX - shiftX;
left < 0 && (left = 0);
elem.style.left = left + 'px';
var top = event.pageY - shiftY;
top < -18 && (top = -18);
elem.style.top = top + 'px';
}
function getMousePos(elem , event) {
var rect = elem.getBoundingClientRect();
return {
x: event.clientX - rect.left,
y: event.clientY - rect.top + 18
};
}
</script>
</body>
</html>