<header>
  <h2 class="title">drop (HTML Event)</h2>
  <p class="description">Визначає дію після скидання перетягуваного елемента в цільову зону.</p>
</header>
<main>
  <div class="result">
    <div id="fileDropZone" class="drop-zone">
      Перетягніть файли сюди
    </div>
    <div id="previewArea" class="preview-area">
      <!-- Прев'ю завантажених файлів -->
    </div>
    <button id="clearButton">Очистити зону</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  text-align: center;
}

.drop-zone {
  width: 100%;
  height: 150px;
  margin-bottom: 15px;
  border: 2px dashed #007bff;
  background-color: #f8f8f8;
  line-height: 150px;
  text-align: center;
  color: #999;
  transition: background-color 0.3s, border-color 0.3s;
}

.drop-zone.over {
  background-color: #e0ffe0;
  border-color: #00b300;
}

.preview-area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.preview-area img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 1px solid #ddd;
}

button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #e74c3c;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #c0392b;
}

document.addEventListener('DOMContentLoaded', function() {
  const dropZone = document.getElementById('fileDropZone');
  const previewArea = document.getElementById('previewArea');
  const clearButton = document.getElementById('clearButton');

  dropZone.addEventListener('dragover', function(event) {
    event.preventDefault();
    dropZone.classList.add('over');
    console.log('Файли перетягуються над зоною завантаження.');
  });

  dropZone.addEventListener('dragleave', function(event) {
    dropZone.classList.remove('over');
    console.log('Файли покинули зону завантаження.');
  });

  dropZone.addEventListener('drop', function(event) {
    event.preventDefault();
    dropZone.classList.remove('over');

    const files = event.dataTransfer.files;
    for (const file of files) {
      if (file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(e) {
          const img = document.createElement('img');
          img.src = e.target.result;
          previewArea.appendChild(img);
        };
        reader.readAsDataURL(file);
      } else {
        console.log('Недопустимий тип файлу: ', file.name);
      }
    }
    console.log('Файли успішно скинуті.');
  });

  clearButton.addEventListener('click', function() {
    previewArea.innerHTML = '';
    console.log('Зона попереднього перегляду очищена.');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.