<header>
  <h2 class="title">dragover (HTML Event)</h2>
  <p class="description">Активує подію під час перетягування елемента над зоною призначення.</p>
</header>
<main>
  <div class="result">
    <div id="fileDropZone" class="drop-zone">
      Перетягніть файли сюди
    </div>
    <p id="fileCount">Кількість файлів: 0</p>
    <ul id="fileList" class="file-list">
      <!-- Список завантажених файлів буде тут -->
    </ul>
    <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;
}

.file-list {
  list-style-type: none;
  padding: 0;
  margin-top: 15px;
  text-align: left;
}

.file-list li {
  padding: 8px;
  border-bottom: 1px solid #ddd;
  color: #333;
}

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 fileList = document.getElementById('fileList');
  const fileCount = document.getElementById('fileCount');
  const clearButton = document.getElementById('clearButton');
  let count = 0;

  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) {
      const listItem = document.createElement('li');
      listItem.textContent = `Файл: ${file.name} (${file.size} байт)`;
      fileList.appendChild(listItem);
    }
    count += files.length;
    fileCount.textContent = `Кількість файлів: ${count}`;
    console.log('Файли успішно скинуті.');
  });

  clearButton.addEventListener('click', function() {
    fileList.innerHTML = '';
    count = 0;
    fileCount.textContent = 'Кількість файлів: 0';
    console.log('Список файлів очищено.');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.