Как прекратить отмену dragover на краю картинки?

Question

Когда начинаю перетаскивать картинку в область preview (событием dragover), подсвечиваю её бордером. Но такая проблема, что если ввожу по этой области (не бросив картинку), то постоянно на краях картинок которые уже есть, бордер сбрасывается. Как это изменить?

const preview = document.querySelector('.preview');

preview.addEventListener("dragover", (event) => {
    event.preventDefault();
    preview.classList.add("drop-zone");
})

preview.addEventListener("dragleave", () => {
    preview.classList.remove("drop-zone");
})

.main {
    max-width: 560px;
    margin: 0 auto;
    min-height: 100vh;
}
.preview {
    display: flex;
    flex-wrap: wrap;
}
.preview-image {
    position: relative;
    height: 20vh;
    flex-grow: 1;
    margin: 5px;
    overflow: hidden;
}
.preview-image:last-child {
    flex-grow: 10;
}
.preview-image img {
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
}
.drop-zone {
    border: 2px dotted rgb(67, 114, 243);
  padding: 5px;
}

<div class="main">  
  <div class="preview">
    <div class="preview-image">

      <img src="https://pbs.twimg.com/media/EeCOiprXYAAdTlj.jpg" alt="snow-river">
    </div>
    <div class="preview-image">

      <img src="https://tour-bar.ru/wp-content/uploads/2019/09/cropped-kariby-osnovnaya.jpg" alt="snow-river">
    </div>
    <div class="preview-image">

      <img src="https://tour-bar.ru/wp-content/uploads/2019/09/cropped-kariby-osnovnaya.jpg" alt="snow-river">
    </div>
    <div class="preview-image">

      <img src="https://www.nastol.com.ua/pic/201604/1920x1080/nastol.com.ua-172666.jpg" alt="snow-river">
    </div>
    <div class="preview-image">

      <img src="https://zakagioboi.ru/assets/images/products/country/07.03.14/CHINA-107003903.jpg" alt="snow-river">
    </div>     
     <div class="preview-image"></div>
  </div>
</div>

БЛОГ НА HUSL

Как прекратить отмену dragover на краю картинки?

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