Почему картинка не скрывается под контейнером?

Question

Делаю drag and drop на изображении, путем присваивания изображению абсолютного позиционирования. Но при перетаскивании изображения оно выходит за рамки viewing-area. Присвоил ему overflow: auto, то есть должна появляться прокрутка, но изображение просто вылезает. Как скрывать картинку под viewing-area, когда она вылезает за его пределы?

let insert_image = document.forms.insert_image;
let url_input = document.querySelector('.url-input');
let file_input = document.querySelector('.file-input');
let submit = document.querySelector('.submit');
let viewing_area = document.querySelector('.viewing-area');
let submit2 = document.querySelector('.submit2');

function dragImage(event) {
  let image = event.target;
  let shiftX = event.clientX - image.getBoundingClientRect().left;
  let shiftY = event.clientY - image.getBoundingClientRect().top;
  let width = image.getBoundingClientRect().width;
  let height = image.getBoundingClientRect().height;

  image.style.position = 'absolute';
  image.style.maxWidth = width + 'px';
  image.style.maxHeight = height + 'px';


  moveAt(event.pageX, event.pageY);

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

  function onMouseMove(event) {
    moveAt(event.pageX, event.pageY);
  }

  viewing_area.addEventListener('mousemove', onMouseMove);

  image.onmouseup = function() {
    viewing_area.removeEventListener('mousemove', onMouseMove);
    image.onmouseup = null;
  };

}


function insertByUrl(event) {
  let image = document.createElement('img');
  image.src = url_input.value;
  viewing_area.append(image);
  image.ondragstart = function() {
    return false;
  };
  image.addEventListener('mousedown', dragImage);
}

function insertByFile() {
  let image = document.createElement('img');
  let file = file_input.files[0];
  let fileReader = new FileReader();

  fileReader.readAsDataURL(file);

  fileReader.onload = function() {
    image.src = fileReader.result;
  }

  viewing_area.append(image);

  image.ondragstart = function() {
    return false;
  };
  image.addEventListener('mousedown', dragImage);
}


submit.addEventListener('click', insertByUrl);
submit2.addEventListener('click', insertByFile);

body {
  background: linear-gradient(72.21deg, #141812 -0.34%, #161422 28.25%, #1C0D0D 68.52%, #1A0623 96.34%);
  height: 100vh;
}

.viewing-area {
  width: 842px;
  height: 553px;
  background: white;
  border: 6px solid #4D4C4C;
  border-radius: 15px;
  overflow: auto;
  img {
    max-width: 80%;
    max-height: 80%;
  }
}

input[type="file"] {
  color: white;
}

<div class="viewing-area"></div>
<form name="insert_image">
  <input type="file" name="file" class="file-input" placeholder="">
  <input type="url" name="url" class="url-input" placeholder="https://example.com">
  <input type="button" name="submit" value="Добавить" class="submit">
  <input type="button" name="submit2" value="Добавить (файлом)" class="submit2">
</form>

Answer 1

.viewing-area нужно добавить position:relative

БЛОГ НА HUSL

Почему картинка не скрывается под контейнером?

Ответы (1 шт):