Имплементација функције превлачења и испуштања је лакша него што мислите. Сазнајте како у овом корисном водичу.

Превуци и испусти је суштинска карактеристика која побољшава интеракцију корисника и омогућава беспрекорно корисничко искуство. Без обзира да ли желите да направите програм за отпремање датотека, листу која се може сортирати или интерактивну игру, разумевање како да искористите могућности овог АПИ-ја је кључна вештина коју морате имати на свом вебу развојни алат.

Основе превлачења и испуштања у ХТМЛ-у

У типичном систему превлачења и испуштања, постоје два типа елемената: први тип обухвата елементе који се могу превући и које корисници може да се креће помоћу миша, а други тип укључује елементе који се могу испустити и који обично одређују где корисници могу да поставе елемент.

Да бисте применили превлачење и испуштање, морате да кажете прегледачу које елементе желите да превучете. Да би корисник могао да превуче елемент, тај елемент треба да има а превлачењеХТМЛ атрибут подешен на истина, овако:

instagram viewer 
<divdraggable="true">This element is draggablediv>

Када корисник почне да покреће догађај превлачења, прегледач испоручује подразумевану „дух“ слику која обично даје повратне информације о елементу који се превлачи.

Ову слику можете прилагодити тако што ћете уместо ње унети своју слику. Да бисте то урадили, изаберите елемент који се може превући из ДОМ-а, креирајте нову слику која ће представљати прилагођену слику повратних информација и додајте драгстарт превуците слушалац догађаја овако:

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}`);
});

Горњи блок кода преузима податке са истим типом података (текст/обичан) који је постављен помоћу сетДата() метода раније. Ово вам омогућава да приступите и манипулишете пренетим подацима по потреби унутар контекста елемента који се може испустити.

Случајеви коришћења интерфејса за превлачење и испуштање

Интеграција функције превлачења и испуштања у ваше веб апликације може бити снажно побољшање, али је од суштинског значаја да разумете када и зашто треба да је примените.

  • Филе Уплоадерс: Омогућавање корисницима да превлаче датотеке директно са своје радне површине или менаџера датотека у одређено подручје за испуштање, поједностављује процес отпремања.
  • Сортибилне листе: Ако ваша апликација укључује листе ставки, као што су листе задатака, плејлисте или галерије слика, корисници би могли да цене могућност промене редоследа ставки превлачењем и испуштањем.
  • Интерактивне контролне табле: За алати за визуелизацију података и извештавање, превлачење и испуштање може бити моћан начин за кориснике да прилагоде своје контролне табле преуређивањем виџета и графикона.

Имајте на уму приступачност

Иако превлачење и испуштање може бити визуелно привлачно и побољшати корисничко искуство, кључно је осигурати да ваша имплементација остане доступна свим корисницима, укључујући и оне са инвалидитетом. Обезбедите алтернативне методе за интеракцију, као што су контроле на тастатури, да би ваша апликација била инклузивна.