Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu.

Chceli ste niekedy pridať funkciu drag-and-drop do vašich komponentov React? Nie je to také ťažké, ako si možno myslíte.

Drag and drop je spôsob presúvania alebo manipulácie s prvkami na obrazovke pomocou myši alebo touchpadu. Je ideálny na zmenu poradia zoznamu položiek alebo presun položiek z jedného zoznamu do druhého.

Komponenty drag-and-drop môžete v Reacte vytvoriť pomocou jednej z dvoch metód: vstavaných funkcií alebo modulu tretej strany.

Rôzne spôsoby implementácie Drag and Drop in React

Existujú dva spôsoby implementácie drag and drop v React: pomocou vstavaných funkcií Reactu alebo pomocou modulu tretej strany. Začnite tým vytvorenie aplikácie Reacta potom vyberte preferovaný spôsob.

Metóda 1: Používanie vstavaných funkcií

V React môžete použiť udalosť onDrag na sledovanie, keď používateľ ťahá prvok, a udalosť onDrop na sledovanie, keď ho pustí. Udalosti onDragStart a onDragEnd môžete použiť aj na sledovanie, kedy sa ťahanie začína a končí.

instagram viewer

Ak chcete, aby sa prvok dal presúvať, môžete atribút draggable nastaviť na hodnotu true. Napríklad:

importovať Reagovať, { Komponent } od 'reagovať';
triedaMyComponentpredlžujeKomponent{
 render() {
vrátiť (
<div
 ťahateľné
 onDragStart={toto.handleDragStart}
 onDrag={toto.handleDrag}
 onDragEnd={toto.handleDragEnd}
>
 Potiahni ma!
</div>
 );
 }
}
exportpredvolená MyComponent;

Ak chcete, aby bol prvok pustiteľný, môžete vytvoriť metódy handleDragStart, handleDrag a handleDragEnd. Tieto metódy sa spustia, keď používateľ pretiahne prvok a keď ho pustí. Napríklad:

importovať Reagovať, { Komponent } od 'reagovať';
triedaMyComponentpredlžujeKomponent{
 handleDragStart (udalosť) {
// Táto metóda sa spustí, keď sa spustí ťahanie
 console.log("Začaté")
 }


handleDrag (udalosť) {
// Táto metóda sa spustí, keď sa komponent ťahá
 console.log("Ťahanie...")
 }


handleDragEnd (udalosť) {
// Táto metóda sa spustí, keď sa ťahanie zastaví
 console.log("Ukončený")
 }


render() {
vrátiť (
<div
 ťahateľné
 onDragStart={toto.handleDragStart}
 onDrag={toto.handleDrag}
 onDragEnd={toto.handleDragEnd}
>
 Potiahni ma!
</div>
 );
 }
}
exportpredvolená MyComponent;

Vo vyššie uvedenom kóde existujú tri metódy na spracovanie ťahania prvku: handleDragStart, handleDrag a handleDragEnd. Div má atribút draggable a nastavuje vlastnosti onDragStart, onDrag a onDragEnd na ich zodpovedajúce funkcie.

Keď potiahnete prvok, najskôr sa spustí metóda handleDragStart. Tu môžete vykonať ľubovoľné nastavenie, ktoré potrebujete, ako napríklad nastavenie údajov na prenos.

Potom sa metóda handleDrag opakovane spúšťa počas ťahania prvku. Tu môžete vykonávať akékoľvek aktualizácie, ako je napríklad úprava polohy prvku.

Nakoniec, keď pustíte prvok, spustí sa metóda handleDragEnd. Tu môžete vykonať akékoľvek vyčistenie, ktoré potrebujete urobiť, napríklad resetovanie údajov, ktoré ste preniesli.

Komponentom môžete pohybovať aj po obrazovke v onDragEnd(). Aby ste to dosiahli, budete musieť nastaviť vlastnosť štýlu komponentu. Napríklad:

importovať Reagovať, { Component, useState } od 'reagovať';
funkciuMyComponent() {
konšt [x, setX] = useState(0);
konšt [y, setY] = useState(0);


konšt handleDragEnd = (udalosť) => {
setX(udalosť.clientX);
setY(udalosť.klientY);
 };


vrátiť (
<div
 ťahateľné
 onDragEnd={handleDragEnd}
 štýl={{
 pozícia: "absolútne",
 vľavo: x,
 hore: y
 }}
>
 Potiahni ma!
</div>
 );
}
exportpredvolená MyComponent;

Kód volá háčik useState na sledovanie polohy x a y komponentu. Potom v metóde handleDragEnd aktualizuje polohu x a y. Nakoniec môžete nastaviť vlastnosť štýlu komponentu, aby ste ho umiestnili na nové pozície x a y.

Metóda 2: Použitie modulu tretej strany

Ak nechcete využívať vstavané funkcie Reactu, môžete použiť modul tretej strany ako napr. reagovať-drag-and-drop. Tento modul poskytuje obal špecifický pre React okolo HTML5 drag-and-drop API.

Ak chcete použiť tento modul, musíte ho najprv nainštalovať pomocou npm:

npm Inštalácia reagovať-pretiahnuť-a-pokles--uložiť

Potom ho môžete použiť vo svojich komponentoch React:

importovať Reagovať, { Komponent } od 'reagovať';
importovať { Draggable, droppable } od 'react-drag-and-drop';
triedaMyComponentpredlžujeKomponent{
 render() {
vrátiť (
<div>
<Preťahovateľný typ="foo" údaje ="bar">
<div>Potiahni ma!</div>
</Draggable>


<Typy s možnosťou vypustenia={['foo']} onDrop={this.handleDrop}>
<div>Skočte sem!</div>
</Droppable>
</div>
 );
 }


handleDrop (údaje, udalosť) {
// Táto metóda sa spustí, keď údaje klesnú
konzoly.log (údaje); // 'bar'
 }
}
exportpredvolená MyComponent;

Začnite importovaním komponentov Draggable a Droppable z modulu Reag-Drag-and-drop. Potom použite tieto komponenty na vytvorenie presúvateľného prvku a prvku s možnosťou pustenia.

Komponent Draggable akceptuje typovú podperu, ktorá špecifikuje typ údajov, ktoré komponent predstavuje, a údajovú podperu, ktorá špecifikuje údaje na prenos. Všimnite si, že typ je vlastný názov, ktorý si môžete vybrať na sledovanie toho, ktorý komponent je ktorý vo viaczložkovom rozhraní.

Komponent Droppable používa typovú podperu na určenie typov údajov, ktoré naň môžete umiestniť. Má tiež podperu onDrop, ktorá špecifikuje funkciu spätného volania, ktorá sa spustí, keď na ňu pustíte komponent.

Keď presuniete komponent, ktorý možno presúvať, na roztiahnuteľný prvok, spustí sa metóda handleDrop. Toto je miesto, kde môžete vykonať akékoľvek spracovanie, ktoré potrebujete urobiť s údajmi.

Tipy na vytváranie užívateľsky prívetivých komponentov DnD

Existuje niekoľko vecí, ktoré môžete urobiť, aby boli komponenty presunutia myšou pohodlnejšie.

Najprv by ste mali poskytnúť vizuálnu spätnú väzbu, keď sa prvok presúva. Môžete napríklad zmeniť nepriehľadnosť prvku alebo pridať orámovanie. Na pridanie vizuálnych efektov môžete použiť bežné CSS alebo tailwind CSS vo vašej aplikácii React.

Po druhé, mali by ste sa uistiť, že vaši používatelia môžu pretiahnuť prvok iba na platný cieľ presunutia. Môžete napríklad pridať typy atribút prvku, ktorý špecifikuje typy komponentov, ktoré bude akceptovať.

Po tretie, mali by ste používateľovi poskytnúť spôsob, ako zrušiť operáciu presunutia myšou. Môžete napríklad pridať tlačidlo, ktoré používateľovi umožní zrušiť operáciu.

Zlepšite používateľskú skúsenosť pomocou funkcie Drag and Drop

Funkcia drag-and-drop pomáha nielen zlepšiť používateľskú skúsenosť, ale môže tiež pomôcť s celkovým výkonom vašej webovej aplikácie. Používateľ môže teraz jednoducho zmeniť poradie niektorých údajov bez toho, aby musel obnovovať stránku alebo prechádzať viacerými krokmi.

Do aplikácie React môžete pridať aj ďalšie animácie, aby bola funkcia presúvania myšou interaktívnejšia a užívateľsky príjemnejšia.