Javascript-форум - Перетаскивание и увеличение объекта внутри рамки

Всем привет!
Работаю над созданием скрипта, который позволяет делать две вещи:
* приближение и отдаление картинки внутри жесткой рамки;
* перемещение оной там же, мышью;
Изначально перед нами на странице картинка по ширине рамки. Вот скрин:

Картинка увеличивается внутри рамки, т.к. у последней задан overflow: hidden.

Мне удалось сделать эффект приближения и отдаления, но drag'n'drop не получается. Почему-то картинка изменяется в размере и выходит за пределы рамки.

Приведу коды HTML, CSS и javascript:

<div id="border1" class="main-border">           
      <img id="map" alt="" src="img/13_zagros.jpg">
</div>

Код:

.main-border {

    margin: auto;

    overflow: hidden;

    width: 500px;

    height: 300px;

    margin-top: 2%;

    border: 3px solid #663333;

//КОД ПРИБЛИЖЕНИЯ И ОТДАЛЕНИЯ, РАБОТАЕТ БОЛЕЕ-МЕНЕЕ НОРМАЛЬНО:
var block = document.getElementById('map');
var x = 100;

block.onwheel = function(event) {
    if(event.deltaY < 0 && this.style.width < "500%"){
        x += 5;
        this.style.width = x + '%';
    }
    if(event.deltaY > 0 && this.style.width > "100%"){
        x -= 5;
        this.style.width = x + '%';
    }    
    return false;
}

//КОД ПЕРЕМЕЩЕНИЯ, ТУТ ПОЛНАЯ ШЛЯПА...
var blockmove = document.getElementById('map');

blockmove.onmousedown = function(e) { 
  
  blockmove.style.position = 'absolute';
  moveAt(e);
  document.body.appendChild(blockmove);

  blockmove.style.zIndex = 1000; 
  
  function moveAt(e) {
    blockmove.style.left = e.pageX - blockmove.offsetWidth / 2 + 'px';
    blockmove.style.top = e.pageY - blockmove.offsetHeight / 2 + 'px';
  }
  
  document.onmousemove = function(e) {
    moveAt(e);
  }
  
  blockmove.onmouseup = function() {
    document.onmousemove = null;
    blockmove.onmouseup = null;
  }
}

Я не силен в Javascript, но очень хотелось бы разобраться. Буду благодарен за любую помощь!

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .main-border { margin: auto; overflow: hidden; width: 500px; height: 300px; border: 3px solid #663333; position: relative; } .main-border img{ height: auto; width: 100%; position: absolute; left: 0; top: 0; } </style> </head> <body> <div id="border1" class="main-border"> <img id="map" alt="" src="https://unsplash.it/500/300/?random&1"> </div> <script> //КОД ПРИБЛИЖЕНИЯ И ОТДАЛЕНИЯ, РАБОТАЕТ БОЛЕЕ-МЕНЕЕ НОРМАЛЬНО: var block = document.getElementById('map'); var x = 100; block.onwheel = function(event) { if(event.deltaY < 0 && x < 500){ x += 5; this.style.width = x + '%'; } if(event.deltaY > 0 && x > 100){ x -= 5; this.style.width = x + '%'; } return false; } //КОД ПЕРЕМЕЩЕНИЯ, ТУТ ПОЛНАЯ ШЛЯПА... var blockmove = document.getElementById('border1'); var left = 0, tp = 0, xx, yy; blockmove.onmousedown = function(e) { e.preventDefault(); xx = e.pageX; yy = e.pageY; function moveAt(e) { block.style.left = (left + e.pageX - xx) + 'px'; block.style.top = (tp + e.pageY - yy) + 'px'; } blockmove.onmousemove = function(e) { moveAt(e); } blockmove.onmouseleave = blockmove.onmouseup = function(e) { left = parseFloat(block.style.left); tp = parseFloat(block.style.top); blockmove.onmouseleave = null; blockmove.onmousemove = null; blockmove.onmouseup = null; } } </script> </body> </html>