Превуци и испусти је суштинска карактеристика која побољшава интеракцију корисника и омогућава беспрекорно корисничко искуство. Без обзира да ли желите да направите програм за отпремање датотека, листу за сортирање или интерактивну игру, разумевање како да искористите могућности овог АПИ-ја је кључна вештина коју морате имати у свом комплету алата за веб развој.
Преглед садржаја
Основе превлачења и испуштања у ХТМЛ-у
У типичном систему превуци и отпусти, постоје два типа елемената: први тип обухвата елементе који се могу превући и које корисници могу да померају мишем, а други тип укључује елементе који се могу спустити и који обично одређују где корисници могу да поставе елемент.
Да бисте применили превлачење и испуштање, морате да кажете прегледачу које елементе желите да превучете. Да би корисник омогућио превлачење елемента, тај елемент треба да има ХТМЛ атрибут за превлачење постављен на тачно, као што је овај:
<div draggable="true">This element is draggable</div>
Када корисник почне да покреће догађај превлачења, претраживач испоручује подразумевану „дух“ слику која обично даје повратне информације о елементу који се превлачи.
Ову слику можете прилагодити тако што ћете уместо ње унети своју слику. Да бисте то урадили, изаберите елемент који се може превући из ДОМ-а, креирајте нову слику која ће представљати прилагођену слику повратних информација и додајте слушалац догађаја превлачења са превлачењем на следећи начин:
let img = new Image();
img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png";document.querySelector('div').addEventListener('dragstart', (event)=>{
event.dataTransfer.setDragImage(img, 10, 10);
})
У блоку кода изнад, метода сетДрагИмаге има три параметра. Први параметар упућује на слику. Остали параметри представљају хоризонталне и вертикалне помаке слике. Када покренете код у претраживачу и почнете да превлачите елемент, приметићете да је прилагођена слика за превлачење замењена прилагођеном сликом која је раније постављена.
Ако желите да дозволите испуштање, морате спречити подразумевано понашање тако што ћете отказати и драгентер и драговер догађаје, овако:
const dropElement = document.querySelector("drop-target");dropElement.addEventListener("dragenter", (ev) => {
ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
ev.preventDefault();
});
Разумевање интерфејса ДрагЕвент
ЈаваСцрипт има интерфејс ДрагЕвент који представља интеракцију превуци и испусти од корисника. Испод је листа могућих типова догађаја испод ДрагЕвент интерфејса.
- превуците: Корисник покреће овај догађај док превлачи елемент.
- драгенд: Овај догађај се покреће када се операција превлачења заврши или када је корисник прекине. Типична операција превлачења се може завршити отпуштањем дугмета миша или притиском на тастер за излаз.
- драгентер: Превучени елемент покреће овај догађај када уђе у важећи циљ испуштања.
- драглеаве: Када превучени елемент напусти циљ испуштања, овај догађај се покреће.
- драговер: Када корисник превуче елемент који се може превући преко циља испуштања, догађај се покреће.
- драгстарт: Догађај се покреће на почетку операције превлачења.
- дроп: Корисник покреће овај догађај када испусти елемент на циљ спуштања.
Када превлачите датотеку у претраживач из окружења изван претраживача (на пример, менаџер датотека оперативног система), претраживач не покреће догађаје драгстарт или драгенд.
ДрагЕвент може бити од користи ако желите да програмски пошаљете прилагођени догађај превлачења. На пример, ако желите да див активира прилагођене догађаје превлачења при учитавању странице, ево како то радите. Прво направите нови прилагођени ДрагЕвент() овако:
const customDragStartEvent = new DragEvent('dragstart', {
dataTransfer: new DataTransfer(),
})const customDragEndEvent = new DragEvent('dragend');
У блоку кода изнад, цустомДрагСтартЕвент представља инстанцу ДрагЕвент(). У цустомДрагСтартЕвент постоје два аргумента конструктора. Први представља тип догађаја превлачења, који може бити један од седам раније поменутих типова догађаја.
Други аргумент је објекат са кључем датаТрансфер који представља инстанцу ДатаТрансфер-а, о чему ћете сазнати више касније у овом водичу. Затим зграбите елемент из којег желите да покренете догађај из модела објекта документа (ДОМ).
const draggableElement = document.querySelector("#draggable");
Затим додајте слушаоце догађаја овако:
draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
event.dataTransfer.setData('text/plain', 'Hello, world!');
}); draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
});
У првом слушаоцу догађаја изнад, функција функције повратног позива бележи текст: „Превуците је почело!“ и позива метод сетДата на својству датаТрансфер на објекту догађаја. Сада можете покренути прилагођене догађаје овако:
draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);
Пренос података са преносом података
ДатаТрансфер објекат служи као мост између изворног елемента (ставке која се може превући) и циљног елемента (област која се може испустити) током операције превлачења и отпуштања. Делује као привремени контејнер за складиштење података које желите да делите између ових елемената.
Ови подаци могу имати различите облике, као што су текст, УРЛ адресе или прилагођени типови података, што их чини разноврсним алатом за имплементацију широког спектра функција превлачења и отпуштања.
Коришћење сетДата() за податке о пакету
Да бисте пренели податке из елемента који се може превући у елемент који може да се испусти, користићете метод сетДата() који обезбеђује објекат датаТрансфер. Овај метод вам омогућава да спакујете податке које желите да пренесете и одредите тип података. Ево основног примера:
element.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'Hello, world!');
});
Када корисник почне да превлачи наведени елемент, сетДата() пакује текст „Здраво, свет!“ са типом података тект/плаин. Ови подаци су сада повезани са догађајем превлачења и може им приступити циљ који може да се испусти током операције испуштања.
Преузимање података помоћу гетДата()
На крају који прима, у оквиру слушаоца догађаја елемента који се може испустити, можете да преузмете пренете податке користећи гетДата() метод:
element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});
Горњи блок кода преузима податке са истим типом података (текст/обичан) који је раније постављен коришћењем методе сетДата(). Ово вам омогућава да приступите и манипулишете пренетим подацима по потреби унутар контекста елемента који се може испустити.
Случајеви коришћења интерфејса за превлачење и испуштање
Интеграција функције превлачења и испуштања у ваше веб апликације може бити моћно побољшање, али је од суштинског значаја да разумете када и зашто треба да је примените.
- Отпремачи датотека: Омогућавање корисницима да превуку датотеке директно са своје радне површине или менаџера датотека у одређено подручје за испуштање, поједностављује процес отпремања.
- Листе које се могу сортирати: Ако ваша апликација укључује листе ставки, као што су листе задатака, листе за репродукцију или галерије слика, корисници би могли ценити могућност промене редоследа ставки превлачењем и испуштањем.
- Интерактивне контролне табле: За алатке за визуелизацију података и извештавање, превлачење и испуштање може бити моћан начин за кориснике да прилагоде своје контролне табле преуређивањем виџета и графикона.
Имајте на уму приступачност
Иако превлачење и испуштање може бити визуелно привлачно и побољшати корисничко искуство, кључно је осигурати да ваша имплементација остане доступна свим корисницима, укључујући и оне са инвалидитетом. Обезбедите алтернативне методе за интеракцију, као што су контроле са тастатуре, да би ваша апликација била инклузивна.