Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti.

Chtěli jste někdy přidat funkci drag-and-drop do vašich komponent React? Není to tak těžké, jak si možná myslíte.

Drag and drop je způsob přesouvání nebo manipulace s prvky na obrazovce pomocí myši nebo touchpadu. Je ideální pro změnu pořadí seznamu položek nebo přesun položek z jednoho seznamu do druhého.

Komponenty přetažením můžete v Reactu vytvořit pomocí jedné ze dvou metod: vestavěných funkcí nebo modulu třetí strany.

Různé způsoby implementace Drag and Drop in React

Existují dva způsoby, jak implementovat drag and drop v Reactu: pomocí vestavěných funkcí Reactu nebo pomocí modulu třetí strany. Začněte tím vytvoření aplikace Reacta poté vyberte preferovanou metodu.

Metoda 1: Použití vestavěných funkcí

V Reactu můžete použít událost onDrag ke sledování, kdy uživatel přetahuje prvek, a událost onDrop ke sledování, když jej upustí. Můžete také použít události onDragStart a onDragEnd ke sledování začátku a konce přetahování.

instagram viewer

Chcete-li, aby byl prvek přetahovatelný, můžete nastavit atribut draggable na hodnotu true. Například:

import Reagovat, { Komponenta } z 'reagovat';
třídaMyComponentrozšiřujeKomponent{
 poskytnout() {
vrátit se (
<div
 přetahovatelné
 onDragStart={tento.handleDragStart}
 onDrag={tento.handleDrag}
 onDragEnd={tento.handleDragEnd}
>
 Táhni mě!
</div>
 );
 }
}
vývoznívýchozí MyComponent;

Chcete-li, aby bylo možné prvek upustit, můžete vytvořit metody handleDragStart, handleDrag a handleDragEnd. Tyto metody se spustí, když uživatel prvek přetáhne a když jej upustí. Například:

import Reagovat, { Komponenta } z 'reagovat';
třídaMyComponentrozšiřujeKomponent{
 handleDragStart (událost) {
// Tato metoda se spustí, když začne přetahování
 console.log("Zahájeno")
 }


handleDrag (událost) {
// Tato metoda se spustí, když je komponenta přetažena
 console.log("Přetahování...")
 }


handleDragEnd (událost) {
// Tato metoda se spustí, když se tažení zastaví
 console.log("Skončilo")
 }


poskytnout() {
vrátit se (
<div
 přetahovatelné
 onDragStart={tento.handleDragStart}
 onDrag={tento.handleDrag}
 onDragEnd={tento.handleDragEnd}
>
 Táhni mě!
</div>
 );
 }
}
vývoznívýchozí MyComponent;

Ve výše uvedeném kódu existují tři metody, jak zvládnout přetažení prvku: handleDragStart, handleDrag a handleDragEnd. Div má atribut draggable a nastavuje vlastnosti onDragStart, onDrag a onDragEnd na jejich odpovídající funkce.

Když prvek přetáhnete, nejprve se spustí metoda handleDragStart. Zde můžete provést jakékoli nastavení, které potřebujete, jako je nastavení dat k přenosu.

Poté se při přetahování prvku opakovaně spouští metoda handleDrag. Zde můžete provádět jakékoli aktualizace, jako je úprava polohy prvku.

Nakonec, když prvek pustíte, spustí se metoda handleDragEnd. Zde můžete provést jakékoli vyčištění, které potřebujete, jako je resetování dat, která jste přenesli.

Komponentu můžete také přesouvat po obrazovce v onDragEnd(). Chcete-li to provést, budete muset nastavit vlastnost style komponenty. Například:

import Reagovat, { Component, useState } z 'reagovat';
funkceMyComponent() {
konst [x, setX] = useState(0);
konst [y, setY] = useState(0);


konst handleDragEnd = (událost) => {
setX(událost.clientX);
setY(událost.klientY);
 };


vrátit se (
<div
 přetahovatelné
 onDragEnd={handleDragEnd}
 styl={{
 pozice: "absolutní",
 vlevo: x,
 nahoře: y
 }}
>
 Táhni mě!
</div>
 );
}
vývoznívýchozí MyComponent;

Kód volá háček useState ke sledování polohy x a y komponenty. Potom v metodě handleDragEnd aktualizuje polohu x a y. Nakonec můžete nastavit vlastnost style komponenty tak, aby byla umístěna na nové pozice x a y.

Metoda 2: Použití modulu jiného výrobce

Pokud nechcete používat vestavěné funkce Reactu, můžete použít modul třetí strany, jako je např. reagovat-drag-and-drop. Tento modul poskytuje obálku specifickou pro React kolem HTML5 drag-and-drop API.

Chcete-li tento modul používat, musíte jej nejprve nainstalovat pomocí npm:

npm Nainstalujte reagovat-táhnout-a-pokles--Uložit

Poté jej můžete použít ve svých komponentách React:

import Reagovat, { Komponenta } z 'reagovat';
import { Draggable, droppable } z 'react-drag-and-drop';
třídaMyComponentrozšiřujeKomponent{
 poskytnout() {
vrátit se (
<div>
<Přetahovací typ="foo" data="bar">
<div>Táhni mě!</div>
</Draggable>


<Typy s možností vypuštění={['foo']} onDrop={this.handleDrop}>
<div>Pusťte se sem!</div>
</Droppable>
</div>
 );
 }


handleDrop (data, událost) {
// Tato metoda se spustí, když data vypadnou
řídicí panel.log (data); // 'bar'
 }
}
vývoznívýchozí MyComponent;

Začněte importováním komponent Draggable a Droppable z modulu Reaguj-přetáhni a pusť. Poté použijte tyto komponenty k vytvoření přetahovatelného prvku a přetahovacího prvku.

Komponenta Draggable přijímá typ prop, který určuje typ dat, která komponenta představuje, a datovou prop, která specifikuje data k přenosu. Všimněte si, že typ je vlastní název, který si můžete vybrat, abyste měli přehled o tom, která komponenta je která v rozhraní s více komponentami.

Komponenta Droppable používá prop pro typy k určení typů dat, která na ni můžete umístit. Má také podpěru onDrop, která určuje funkci zpětného volání, která se spustí, když na ni pustíte komponentu.

Když pustíte přetahovatelnou komponentu na dropable, spustí se metoda handleDrop. Zde můžete provádět jakékoli zpracování, které s daty potřebujete.

Tipy pro vytváření uživatelsky přívětivých komponent DnD

Existuje několik věcí, které můžete udělat, aby byly vaše komponenty přetahování uživatelsky přívětivější.

Nejprve byste měli poskytnout vizuální zpětnou vazbu při přetahování prvku. Můžete například změnit neprůhlednost prvku nebo přidat ohraničení. Chcete-li přidat vizuální efekty, můžete použít normální CSS nebo tailwind CSS ve vaší aplikaci React.

Zadruhé byste se měli ujistit, že vaši uživatelé mohou prvek přetáhnout pouze na platný cíl přetažení. Můžete například přidat typy atribut k prvku, který určuje typy komponent, které bude přijímat.

Za třetí, měli byste uživateli poskytnout způsob, jak zrušit operaci přetažení. Můžete například přidat tlačítko, které uživateli umožní operaci zrušit.

Vylepšete uživatelskou zkušenost pomocí funkce Drag and Drop

Funkce drag-and-drop pomáhá nejen zlepšit uživatelský dojem, ale může také pomoci s celkovým výkonem vaší webové aplikace. Uživatel nyní může snadno změnit pořadí některých dat, aniž by musel obnovovat stránku nebo procházet několika kroky.

Do aplikace React můžete také přidat další animace, aby byla funkce přetažení interaktivnější a uživatelsky přívětivější.