Как да използвате HTML API за плъзгане и пускане

Плъзгане и пускане е основна функция, която подобрява взаимодействието с потребителите и улеснява безпроблемното потребителско изживяване. Независимо дали търсите да създадете програма за качване на файлове, списък с възможност за сортиране или интерактивна игра, разбирането как да използвате възможностите на този API е ключово умение, което трябва да имате във вашия инструментариум за уеб разработка.

Съдържание

Основи на плъзгане и пускане в HTML

В типичната система за плъзгане и пускане има два типа елементи: първият тип включва елементи с възможност за плъзгане, които потребителите могат да местят с мишка, а вторият тип включва елементи с възможност за пускане, които обикновено указват къде потребителите могат да поставят даден елемент.

За да приложите плъзгане и пускане, трябва да кажете на браузъра кои елементи искате да могат да се плъзгат. За да направите елемент с възможност за плъзгане от потребителя, този елемент трябва да има HTML атрибут за плъзгане, зададен на true, като този:

 <div draggable="true">This element is draggable</div>

Когато потребителят започне да задейства събитие за плъзгане, браузърът предоставя изображение „призрак“ по подразбиране, което обикновено осигурява обратна връзка относно елемент, който се плъзга.

Можете да персонализирате това изображение, като вместо това предоставите свое собствено изображение. За да направите това, изберете елемента с възможност за плъзгане от DOM, създайте ново изображение, което да представлява персонализираното изображение за обратна връзка, и добавете слушател на събитие за плъзгане при плъзгане по следния начин:

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

В кодовия блок по-горе методът setDragImage има три параметъра. Първият параметър препраща към изображението. Другите параметри представляват съответно хоризонталното и вертикалното отместване на изображението. Когато стартирате кода в браузъра и започнете да плъзгате елемент, ще забележите, че персонализираното изображение за плъзгане е заменено с персонализираното изображение, зададено по-рано.

MongoDB Atlas Charts: Ръководство за начинаещи

Ако искате да разрешите отпадане, трябва да предотвратите поведението по подразбиране, като отмените събитията dragenter и dragover, като това:

 const dropElement = document.querySelector("drop-target");dropElement.addEventListener("dragenter", (ev) => {
  ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
  ev.preventDefault();
});

Разбиране на интерфейса DragEvent

JavaScript разполага с интерфейс DragEvent, който представлява взаимодействие с плъзгане и пускане от потребителя. По-долу е даден списък с възможни типове събития под интерфейса DragEvent.

плъзгане: Потребителят задейства това събитие, докато плъзга елемент.
dragend: Това събитие се задейства, когато операцията по плъзгане приключи или когато потребителят я прекъсне. Типичната операция на плъзгане може да приключи с отпускане на бутона на мишката или натискане на клавиша за изход.
dragenter: Влачен елемент задейства това събитие, когато влезе в валидна цел за изпускане.
dragleave: Когато влаченият елемент напусне цел за изпускане, това събитие се задейства.
dragover: Когато потребителят плъзга елемент с възможност за плъзгане върху цел за пускане, събитието се задейства.
dragstart: Събитието се задейства в началото на операция за плъзгане.
drop: Потребителят задейства това събитие, когато пусне елемент върху цел за пускане.

Когато плъзгате файл в браузъра от среда извън браузъра (например файловия мениджър на операционната система), браузърът не задейства събитията dragstart или dragend.

DragEvent може да бъде полезно, ако искате програмно да изпратите персонализирано събитие за плъзгане. Например, ако искате div да задейства персонализирани събития за плъзгане при зареждане на страница, ето как да го направите. Първо създайте нов персонализиран DragEvent() като този:

 const customDragStartEvent = new DragEvent('dragstart', {
    dataTransfer: new DataTransfer(),
})const customDragEndEvent = new DragEvent('dragend');

В кодовия блок по-горе customDragStartEvent представлява екземпляр на DragEvent(). В customDragStartEvent има два аргумента на конструктора. Първият представлява тип събитие за плъзгане, което може да бъде един от седемте типа събития, споменати по-рано.

Програми на Python за операции с низове

Вторият аргумент е обект с ключ за DataTransfer, представляващ екземпляр на DataTransfer, за който ще научите повече по-късно в това ръководство. След това вземете елемента, от който искате да задействате събитието, от Document Object Model (DOM).

 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!');
  });

В първия слушател на събития по-горе функцията за обратно извикване регистрира текста „Плъзгането започна!“ и извиква метода setData на свойството dataTransfer на обекта на събитието. Сега можете да задействате персонализирани събития по следния начин:

 draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Прехвърляне на данни с dataTransfer

Обектът dataTransfer служи като мост между изходния елемент (елемента с възможност за плъзгане) и целевия елемент (областта с възможност за пускане) по време на операция за плъзгане и пускане. Той действа като контейнер за временно съхранение на данни, които искате да споделите между тези елементи.

Тези данни могат да приемат различни форми, като текст, URL адреси или потребителски типове данни, което ги прави универсален инструмент за прилагане на широка гама от функции за плъзгане и пускане.

Използване на setData() за пакетиране на данни

За да прехвърлите данни от елемент с възможност за плъзгане към елемент с възможност за пускане, ще използвате метода setData(), предоставен от обекта dataTransfer. Този метод ви позволява да пакетирате данните, които искате да прехвърлите, и да посочите типа на данните. Ето един основен пример:

 element.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Когато потребителят започне да плъзга посочения елемент, setData() пакетира текста „Здравей, свят!“ с типа данни text/plain. Тези данни вече са свързани със събитието за плъзгане и могат да бъдат достъпни от целта за пускане по време на операцията за пускане.

Какво да направя, ако моят Mac продължава да се рестартира? 10 съвета за отстраняване на проблема

Извличане на данни с getData()

От приемащата страна, в рамките на слушателя на събития на елемент с възможност за изхвърляне, можете да извлечете прехвърлените данни с помощта на метода getData():

 element.addEventListener('drop', (event) => {
  const transferredData = event.dataTransfer.getData('text/plain');
  console.log(`Received data: ${transferredData}`);
});

Кодовият блок по-горе извлича данните със същия тип данни (текст/обикновен), който беше зададен с помощта на метода setData() по-рано. Това ви позволява да осъществявате достъп и да манипулирате прехвърлените данни според нуждите в контекста на елемента, който може да бъде пуснат.

Използване на интерфейси за плъзгане и пускане

Интегрирането на функцията за плъзгане и пускане във вашите уеб приложения може да бъде мощно подобрение, но е важно да разберете кога и защо трябва да я внедрите.

Устройства за качване на файлове: Позволяването на потребителите да плъзгат файлове директно от работния плот или файловия си мениджър в определена област за качване опростява процеса на качване.
Сортируеми списъци: Ако вашето приложение включва списъци с елементи, като списъци със задачи, плейлисти или галерии с изображения, потребителите може да оценят възможността да пренареждат елементи чрез плъзгане и пускане.
Интерактивни табла за управление: За визуализация на данни и инструменти за отчитане, плъзгане и пускане може да бъде мощен начин за потребителите да персонализират своите табла за управление чрез пренареждане на изпълними модули и диаграми.

Имайте предвид достъпността

Въпреки че плъзгането и пускането може да бъде визуално привлекателно и да подобри потребителското изживяване, от решаващо значение е да гарантирате, че вашето внедряване остава достъпно за всички потребители, включително тези с увреждания. Осигурете алтернативни методи за взаимодействие, като например контроли от клавиатурата, за да направите вашето приложение включващо.