Реалізація перетягування та відкладання завантаження файлів в HTML5
Добре, початківці, приготуйтеся! Ми вирушаємо в подорож, яка буде цікавішою, ніж поїздка на американському гірському велетені. Сьогодні я познайомлю вас із чудовим світом “Реалізація перетягування та розміщення файлів в HTML5”. Але не хвилюйтеся; я не буду засипати вас купою жаргону. Ми разом в цьому і обіцяю, ви не лише зрозумієте це до кінця цієї статті, але й зможете реалізувати це як професіонал. Магічного палички не потрібно!
Дивовижний світ перетягування та розміщення
Перш ніж ми почнемо кодити як чарівники, давайте спробуємо зрозуміти, що таке “Перетягування та розміщення”? Уявіть, що ви замовляєте послуги переїзду, де ви вирішуєте, куди покласти меблі, просто перетягуючи їх у цифровому макеті. Звучить менш втомлююче, ніж тягати реальний диван, чи не так? Вот і саме те, що робить перетягування та розміщення в HTML5. Це робить завантаження файлів таким же простим і менш втомлюючим.
Готуйтеся до Пригод з Кодування
Підготувати пальці Готові? Почнемо!
HTML-Розмітка – Ваше полотно
Спочатку нам потрібна зона для падіння, місце, куди користувачі можуть розміщувати свої файли. Так сказати, як “відкриторотий-алігатор” для файлів. Звучить цікаво, чи не так? Для створення цього алігатора HTML5 надає нам атрибут під назвою “перетягуваний”.
html
<div id="drop-zone" draggable="true">
Перетягніть файли сюди
</div>
Вітаємо! Ви щойно створили голодного алігатора, готового пожерти файли. Але зараз це лише нерозумний алігатор, який нічого не робить, коли файли падають всередину. Ми незабаром перетворимо цей порожній оболонку в справжню, повністю функціональну істоту!
Дружба з JavaScript
Тепер прийшов час, коли ми вводимо JavaScript в гру, призначений надихнути нашого алігатора на життя. Основна функціональність включає три кроки: ;dragover>, ;dragleave> та ;drop>. Бачите, не так вже й важко, чи не так?
javascript
let dropZone = document.getElementById('drop-zone');
dropZone.addEventListener('dragover', function(e) {
e.preventDefault();
// Ми скоро напишемо код тут
});
dropZone.addEventListener('dragleave', function() {
// І тут теж!
});
dropZone.addEventListener('drop', function(e) {
e.preventDefault();
// Чекайте на це!
});
З такою структурою ми маємо базовий каркас готовий. Де ж файли, ви запитуєте? Терпіння, молодий падаване.
Давайте узагальнимо, що відбувається на кожній події:
Dragover
Коли файли перебувають над зоною падіння (подумайте про літаючу тарілку над Білим домом), ми хочемо, щоб користувач відчував, що щось має відбутися. Додайте трохи візуального натяку.
javascript
dropZone.addEventListener('dragover', function(e) {
e.preventDefault();
this.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // Тому що все виглядає крутіше в чорному
});
Dragleave
Коли літаюча тарілка… емм… файли відлітають без падіння, ми повертаємо все до нормального стану.
javascript
dropZone.addEventListener('dragleave', function() {
this.style.backgroundColor = 'initial'; //Знову нормально.
});
Drop
В момент, коли файли нарешті падають, ми можемо отримати до них доступ через об’єкт ;dataTransfer.files>.
javascript
dropZone.addEventListener('drop', function(e) {
e.preventDefault();
let files = e.dataTransfer.files;
// Щось робимо з файлами
this.style.backgroundColor = 'initial'; // Знову нормально.
});
І ось вам! Ви щойно створили функціональність перетягування та розміщення за допомогою HTML5 і JavaScript!
Запам’ятайте тримати практику навіть коли алігатор здається голоднішим, ніж коли-небудь, або JavaScript здається більш таємничим, ніж юнацький щоденник. Пам’ятайте, що комп’ютер – ваш майданчик, тому кодуйте, ламайте, виправляйте, повторюйте. Нарешті, це не одноразовий випадок; це справжня любов. Щасливого кодування!
