drag and drop | Javascript

Перемещение изображения внутри блока

<style>
#raz {
  overflow: auto;  /* полоса прокрутки */ 
  max-height: 400px;
  -webkit-user-select: none; user-select: none;  /* убрать выделение элемента */ 
}
#raz:before {  /* картинка в :before не индексируются */ 
  content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrXhN4l8y6GPXGiRg0CAv1ySXdy3qihvCPRttwS-W0ntLqAtA7hiN_RkNZYmaLyMe-Cymu6NIks6sRbs8AkHDZadr-SL_Kh-H5LEo-aG_gcEAGfJRMV0fU-PqAoCVhJPde8EsWxMfUpK4/s0/romashki.jpg);
}
#raz:active {  /* вид курсора CSS */ 
  cursor: pointer;
  cursor: grabbing;
}
#raz::-webkit-scrollbar {  /* спрятать полосу прокрутки в Chrome */ 
  display: none; 
}
</style>

<div id="raz"></div>

<script>
(function(){
var div = document.getElementById('raz'),
    x1 = null, y1 = null, z = false;
div.addEventListener('mousemove', Raz, false); // событие при движении мышки
div.addEventListener('click', Raz, false); // событие при клике
div.addEventListener('mouseup', Raz0, false); // событие с отпущенной клавишей мышки
div.addEventListener('mouseout', Raz0, false); // событие при выходе за пределы области
function Raz(e) {
  if (z == true || e.type == "click") {
    div.scrollLeft -= e.clientX-x1;
    div.scrollTop -= e.clientY-y1;
    x1 = e.clientX; 
    y1 = e.clientY;
  }  
}
div.onmousedown = function(e) { // событие с нажатой клавишей мышки
  var kl = e.keyCode || e.which;
  if (kl == "1") { // только для левой клавиши мышки
    z = true;
    x1 = e.clientX;
    y1 = e.clientY;
  }
}
function Raz0() {z = false;}
})()
</script>

Тот же принцип был использован при создании генератора area map

Другой код сдвига картинки (только CSS).