Drag and drop для перемещения фишки по игровому полю

Я уже писал о реализации броска кубика для онлайн-версии настольной игры. В этой заметке приведу скрипт, с помощью которого сделали перемещение игровых фишек по полю.

Скрипт

В оригинальном скрипте использовался идентификатор ball, который я заменил на redball для красной фишки. Для остальных цветов, соответственно, тоже идентификаторы будут другими.

<img src="red-ball.png" style="cursor:pointer" width="45" height="45" id="redball" class="player-icon">

<script>
var redball = document.getElementById('redball');

redball.onmousedown = function(e) {

  var coords = getCoords(redball);
  var shiftX = e.pageX - coords.left;
  var shiftY = e.pageY - coords.top;

  redball.style.position = 'absolute';
  document.body.appendChild(redball);
  moveAt(e);

  redball.style.zIndex = 1000; // над другими элементами

  function moveAt(e) {
    redball.style.left = e.pageX - shiftX + 'px';
    redball.style.top = e.pageY - shiftY + 'px';
  }

  document.onmousemove = function(e) {
    moveAt(e);
  };

  redball.onmouseup = function() {
    document.onmousemove = null;
    redball.onmouseup = null;
  };

}

redball.ondragstart = function() {
  return false;
};

function getCoords(elem) {   // кроме IE8-
  var box = elem.getBoundingClientRect();
  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset
  };
}
</script>

Скрипт работает только на десктопах с событиями мышки. Для поддержки тачскринов нужно дорабатывать скрипт, используя соответствующие события. Поскольку онлайн-игру под мобильные устройства мы максимально упростили, чтобы всё уместить на маленьких экранах, поддержку касаний не реализовывали.