Drag and Drop összetevők építése a Reactban

Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk.

Szeretett volna valaha is drag and drop funkciót hozzáadni a React összetevőihez? Nem olyan nehéz, mint gondolnád.

A fogd és vidd az elemek mozgatásának vagy manipulálásának módja a képernyőn egér vagy érintőpad segítségével. Tökéletes az elemek listájának átrendezéséhez vagy az elemek egyik listából a másikba való áthelyezéséhez.

A React alkalmazásban két módszer valamelyikével hozhat létre fogd-és-vidd összetevőket: beépített szolgáltatásokkal vagy harmadik féltől származó modullal.

Különböző módszerek a Drag and Drop megvalósítására a Reactben

Kétféleképpen valósíthatja meg a fogd és vidd funkciót a Reactban: a React beépített funkcióival vagy egy harmadik féltől származó modul használatával. Kezdje ezzel React alkalmazás létrehozása, majd válassza ki a kívánt módszert.

1. módszer: A beépített szolgáltatások használata

A React alkalmazásban az onDrag eseménnyel nyomon követheti, hogy a felhasználó mikor húz egy elemet, az onDrop eseményt pedig annak nyomon követésére, amikor eldobja azt. Az onDragStart és onDragEnd események segítségével nyomon követheti a húzás kezdetét és leállását is.

Ha egy elemet áthúzhatóvá szeretne tenni, a draggable attribútumot igazra állíthatja. Például:

import React, { Component } tól től 'reagál';
osztályMyComponentkiterjedÖsszetevő{
 Vakol() {
Visszatérés (
<div
 vonszolható
 onDragStart={ez.handleDragStart}
 onDrag={ez.handleDrag}
 onDragEnd={ez.handleDragEnd}
>
 Húzz!
</div>
 );
 }
}
exportalapértelmezett MyComponent;

Egy elem eldobhatóvá tételéhez létrehozhatja a handleDragStart, a handleDrag és a handleDragEnd metódusokat. Ezek a módszerek akkor futnak le, amikor a felhasználó húzza az elemet, és amikor eldobja. Például:

import React, { Component } tól től 'reagál';
osztályMyComponentkiterjedÖsszetevő{
 handleDragStart (esemény) {
// Ez a metódus akkor fut le, amikor a húzás elindul
 console.log("Elindult")
 }
handleDrag (esemény) {
// Ez a metódus akkor fut, amikor az összetevőt húzza
 console.log("Húzás...")
 }
handleDragEnd (esemény) {
// Ez a metódus akkor fut, amikor a húzás leáll
 console.log("Vége lett")
 }
Vakol() {
Visszatérés (
<div
 vonszolható
 onDragStart={ez.handleDragStart}
 onDrag={ez.handleDrag}
 onDragEnd={ez.handleDragEnd}
>
 Húzz!
</div>
 );
 }
}
exportalapértelmezett MyComponent;

A fenti kódban három módszer létezik egy elem húzásának kezelésére: handleDragStart, handleDrag és handleDragEnd. A div draggable attribútummal rendelkezik, és beállítja az onDragStart, onDrag és onDragEnd tulajdonságokat a megfelelő függvényekre.

Az elem húzásakor először a handleDragStart metódus fut le. Itt elvégezheti a szükséges beállításokat, például beállíthatja az adatok átvitelét.

Ezután a handleDrag metódus ismételten lefut, miközben húzza az elemet. Itt végezhet bármilyen frissítést, például módosíthatja az elem helyzetét.

Végül, amikor eldobja az elemet, a handleDragEnd metódus lefut. Itt végezhet el minden szükséges tisztítást, például visszaállíthatja az átvitt adatokat.

Az onDragEnd() segítségével az összetevőt a képernyőn is mozgathatja. Ehhez be kell állítania az összetevő stílustulajdonságát. Például:

import React, { Component, useState } tól től 'reagál';
funkcióMyComponent() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const handleDragEnd = (esemény) => {
setX(esemény.clientX);
setY(esemény.clientY);
 };
Visszatérés (
<div
 vonszolható
 onDragEnd={handleDragEnd}
 style={{
 pozíció: "abszolút",
 balra: x,
 felső: y
 }}
>
 Húzz!
</div>
 );
}
exportalapértelmezett MyComponent;

A kód meghívja a useState hook-ot az összetevő x és y pozíciójának nyomon követésére. Ezután a handleDragEnd metódusban frissíti az x és y pozíciót. Végül beállíthatja a komponens stílus tulajdonságát, hogy az új x és y pozícióba helyezze azt.

2. módszer: Harmadik féltől származó modul használata

Ha nem szeretné használni a React beépített funkcióit, használhat harmadik féltől származó modult, mint pl. reagál-húz-és-vidd. Ez a modul egy React-specifikus burkot biztosít a HTML5 drag-and-drop API körül.

A modul használatához először telepítenie kell az npm használatával:

npm telepítés reagál-húz-és-csepp--megment

Ezután használhatja a React összetevőiben:

import React, { Component } tól től 'reagál';
import { Húzható, ejthető } tól től 'react-drag-and-drop';
osztályMyComponentkiterjedÖsszetevő{
 Vakol() {
Visszatérés (
<div>
<Húzható típus="foo" adat="rúd">
<div>Húzz!</div>
</Draggable>
<Eldobható típusok={['foo']} onDrop={this.handleDrop}>
<div>Dobj ide!</div>
</Droppable>
</div>
 );
 }
handleDrop (adat, esemény) {
// Ez a metódus akkor fut le, amikor az adatok kiesnek
konzol.log (adatok); // 'rúd'
 }
}
exportalapértelmezett MyComponent;

Kezdje azzal, hogy importálja a húzható és eldobható összetevőket a reagáló húzás és vidd modulból. Ezután ezekkel az összetevőkkel hozzon létre egy húzható és egy eldobható elemet.

A Draggable komponens elfogad egy típusprofilt, amely meghatározza az összetevő által képviselt adatok típusát, és egy adattámaszt, amely meghatározza az átvinni kívánt adatokat. Vegye figyelembe, hogy a típus egy egyéni név, amellyel nyomon követheti, hogy melyik összetevő melyik többkomponensű felületen.

A Doppable komponens típusprofilt használ a rádobható adattípusok meghatározására. Van egy onDrop prop is, amely meghatározza a visszahívási funkciót, amely akkor fut le, amikor rádob egy komponenst.

Amikor a húzható komponenst rádobja az eldobhatóra, a handleDrop metódus fog futni. Itt elvégezheti az adatokkal kapcsolatos bármilyen feldolgozást.

Tippek a felhasználóbarát DnD-komponensek építéséhez

Van néhány dolog, amit megtehet, hogy felhasználóbarátabbá tegye a fogd és vidd összetevőket.

Először vizuális visszajelzést kell adnia egy elem húzásakor. Például módosíthatja az elem átlátszatlanságát, vagy szegélyt adhat hozzá. Vizuális effektusok hozzáadásához használhatja a normál CSS vagy hátszél CSS-t a React alkalmazásban.

Másodszor, győződjön meg arról, hogy a felhasználók csak egy érvényes célpontra húzhatják az elemet. Például hozzáadhatja a típusok attribútumot az elemhez, amely meghatározza, hogy milyen típusú összetevőket fogad el.

Harmadszor, lehetőséget kell biztosítania a felhasználónak a fogd és vidd művelet megszakítására. Például hozzáadhat egy gombot, amely lehetővé teszi a felhasználó számára a művelet megszakítását.

Javítsa a felhasználói élményt a fogd és vidd funkcióval

A fogd és vidd funkció nem csak a felhasználói élmény javításában, hanem a webalkalmazás általános teljesítményében is segíthet. A felhasználó most könnyedén átrendezheti egyes adatok sorrendjét anélkül, hogy frissítenie kellene az oldalt vagy több lépést kellene végrehajtania.

Más animációkat is hozzáadhat a React alkalmazáshoz, hogy interaktívabbá és felhasználóbarátabbá tegye a fogd és vidd funkciót.