Атрибут dropzone тега <article>

<article dropzone="copy"> <h2>Зона сброса статей</h2> <p>Попробуйте перетащить сюда другие элементы (не сработает)</p> </article>

<style> .drop-target { border: 2px dashed #ccc; padding: 20px; transition: all 0.3s; } .drop-target.highlight { border-color: #0d6efd; background-color: #f0f7ff; } </style> <article id="article-dropzone" class="drop-target"> <h2>Реализация зоны сброса на JavaScript</h2> <p>Перетащите сюда файлы или другие элементы</p> </article> <script> const dropzone = document.getElementById('article-dropzone'); // Обработчики для реализации функциональности dropzone dropzone.addEventListener('dragover', function(e) { e.preventDefault(); this.classList.add('highlight'); }); dropzone.addEventListener('dragleave', function() { this.classList.remove('highlight'); }); dropzone.addEventListener('drop', function(e) { e.preventDefault(); this.classList.remove('highlight'); // Обработка сброшенных данных if (e.dataTransfer.files.length > 0) { console.log('Сброшены файлы:', e.dataTransfer.files); } else { const textData = e.dataTransfer.getData('text/plain'); if (textData) { console.log('Сброшен текст:', textData); this.innerHTML += `<p>${textData}</p>`; } } }); </script>

<style> .article-dropzone { border: 2px dashed #dee2e6; border-radius: 5px; padding: 2rem; text-align: center; margin: 1rem 0; transition: all 0.2s; } .article-dropzone.active { border-color: #0d6efd; background-color: #e7f1ff; } .article-dropzone p { color: #6c757d; } </style> <article id="advanced-dropzone" class="article-dropzone"> <h3>Перетащите сюда файлы</h3> <p>или кликните для выбора</p> <input type="file" id="file-input" style="display:none;" multiple> </article> <script> const dropzone = document.getElementById('advanced-dropzone'); const fileInput = document.getElementById('file-input'); // Обработка drag and drop ['dragenter', 'dragover'].forEach(eventName => { dropzone.addEventListener(eventName, highlight, false); }); ['dragleave', 'drop'].forEach(eventName => { dropzone.addEventListener(eventName, unhighlight, false); }); function highlight(e) { e.preventDefault(); e.stopPropagation(); dropzone.classList.add('active'); } function unhighlight(e) { e.preventDefault(); e.stopPropagation(); dropzone.classList.remove('active'); } // Обработка сброса файлов dropzone.addEventListener('drop', handleDrop, false); function handleDrop(e) { const dt = e.dataTransfer; const files = dt.files; handleFiles(files); } // Клик для выбора файлов dropzone.addEventListener('click', () => fileInput.click()); fileInput.addEventListener('change', () => handleFiles(fileInput.files)); function handleFiles(files) { console.log('Обработка файлов:', files); // Здесь можно добавить логику загрузки файлов if (files.length > 0) { dropzone.querySelector('p').textContent = `Выбрано файлов: ${files.length}`; } } </script>