Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju.

Vai kādreiz esat vēlējies saviem React komponentiem pievienot vilkšanas un nomešanas funkcionalitāti? Tas nav tik grūti, kā jūs varētu domāt.

Vilkšana un nomešana ir veids, kā pārvietot vai manipulēt ar elementiem ekrānā, izmantojot peli vai skārienpaliktni. Tas ir lieliski piemērots vienumu saraksta pārkārtošanai vai vienumu pārvietošanai no viena saraksta uz citu.

Varat izveidot vilkšanas un nomešanas komponentus programmā React, izmantojot vienu no divām metodēm: iebūvētās funkcijas vai trešās puses moduli.

Dažādi veidi, kā ieviest vilkšanu un nomešanu programmā React

Ir divi veidi, kā ieviest vilkšanu un nomešanu programmā React: izmantojot React iebūvētos līdzekļus vai trešās puses moduli. Sāciet ar izveidojot React lietojumprogrammu, pēc tam izvēlieties vēlamo metodi.

1. metode: iebūvēto līdzekļu izmantošana

Programmā React varat izmantot notikumu onDrag, lai izsekotu, kad lietotājs velk elementu, un notikumu onDrop, lai izsekotu, kad viņš to nomet. Varat arī izmantot onDragStart un onDragEnd notikumus, lai izsekotu, kad vilkšana sākas un beidzas.

instagram viewer

Lai elementu padarītu velkamu, varat iestatīt vilkšanas atribūtu uz True. Piemēram:

imports Reaģēt, { komponents } no "reaģēt";
klasēMyComponentpagarinaKomponents{
 render() {
atgriezties (
<div
 velkams
 onDragStart={šis.handleDragStart}
 onDrag={šis.handleDrag}
 onDragEnd={šis.handleDragEnd}
>
 Velciet mani!
</div>
 );
 }
}
eksportētnoklusējuma MyComponent;

Lai padarītu elementu nolaižamu, varat izveidot HandDragStart, handleDrag un handleDragEnd metodes. Šīs metodes darbosies, kad lietotājs vilks elementu un nomet to. Piemēram:

imports Reaģēt, { komponents } no "reaģēt";
klasēMyComponentpagarinaKomponents{
 handDragStart (notikums) {
// Šī metode darbojas, kad sākas vilkšana
 console.log("Sākts")
 }


handDrag (notikums) {
// Šī metode darbojas, kad komponents tiek vilkts
 console.log("Notiek vilkšana...")
 }


handDragEnd (notikums) {
// Šī metode darbojas, kad vilkšana apstājas
 console.log("Beigās")
 }


render() {
atgriezties (
<div
 velkams
 onDragStart={šis.handleDragStart}
 onDrag={šis.handleDrag}
 onDragEnd={šis.handleDragEnd}
>
 Velciet mani!
</div>
 );
 }
}
eksportētnoklusējuma MyComponent;

Iepriekš minētajā kodā ir trīs metodes, kā rīkoties ar elementa vilkšanu: handleDragStart, handleDrag un handleDragEnd. Div ir velkams atribūts, un tas iestata onDragStart, onDrag un onDragEnd rekvizītus atbilstošās funkcijas.

Velkot elementu, vispirms tiks palaists HandDragStart metode. Šeit varat veikt visus nepieciešamos iestatījumus, piemēram, iestatīt pārsūtāmos datus.

Pēc tam, velkot elementu, tiek atkārtoti palaista HandDrag metode. Šeit varat veikt jebkādus atjauninājumus, piemēram, pielāgot elementa pozīciju.

Visbeidzot, nometot elementu, tiek palaista HandDragEnd metode. Šeit varat veikt nepieciešamo tīrīšanu, piemēram, atiestatīt pārsūtītos datus.

Varat arī pārvietot komponentu pa ekrānu programmā onDragEnd(). Lai to izdarītu, jums būs jāiestata komponenta stila rekvizīts. Piemēram:

imports React, { Component, useState } no "reaģēt";
funkcijuMyComponent() {
konst [x, setX] = useState(0);
konst [y, setY] = useState(0);


konst handDragEnd = (notikums) => {
setX(notikumu.clientX);
setY(notikumu.klients);
 };


atgriezties (
<div
 velkams
 onDragEnd={handleDragEnd}
 style={{
 pozīcija: "absolūts",
 pa kreisi: x,
 augšā: y
 }}
>
 Velciet mani!
</div>
 );
}
eksportētnoklusējuma MyComponent;

Kods izsauc useState āķi, lai izsekotu komponenta x un y pozīciju. Pēc tam, izmantojot HandDragEnd metodi, tā atjaunina x un y pozīciju. Visbeidzot, varat iestatīt komponenta stila rekvizītu, lai to novietotu jaunajā x un y pozīcijā.

2. metode: trešās puses moduļa izmantošana

Ja nevēlaties izmantot React iebūvētās funkcijas, varat izmantot trešās puses moduli, piemēram, reaģēt-velciet un nometiet. Šis modulis nodrošina React specifisku iesaiņojumu ap HTML5 vilkšanas un nomešanas API.

Lai izmantotu šo moduli, vispirms tas jāinstalē, izmantojot npm:

npm uzstādīt reaģēt-velciet-un-piliens-- saglabāt

Pēc tam varat to izmantot savos React komponentos:

imports Reaģēt, { komponents } no "reaģēt";
imports { Velkams, nolaižams } no 'reaģēt-velciet un nometiet';
klasēMyComponentpagarinaKomponents{
 render() {
atgriezties (
<div>
<Velkams veids="foo" dati="bārs">
<div>Velciet mani!</div>
</Draggable>


<Nolaižamie veidi={['foo']} onDrop={this.handleDrop}>
<div>Nometiet šeit!</div>
</Droppable>
</div>
 );
 }


handleDrop (dati, notikums) {
// Šī metode tiek palaista, kad dati pazūd
konsole.log (dati); // 'bārs'
 }
}
eksportētnoklusējuma MyComponent;

Sāciet ar vilkšanas un nomešanas komponentu importēšanu no reaģēšanas, vilkšanas un nomešanas moduļa. Pēc tam izmantojiet šos komponentus, lai izveidotu velkamu un nolaižamu elementu.

Velkamais komponents pieņem tipa atbalstu, kas norāda komponenta pārstāvēto datu veidu, un datu atbalstu, kas norāda pārsūtāmos datus. Ņemiet vērā, ka veids ir pielāgots nosaukums, kuru varat izvēlēties, lai izsekotu, kurš komponents ir kurš daudzkomponentu saskarnē.

Komponents Nolaižams izmanto tipu rekvizītu, lai norādītu datu veidus, kurus tajā varat nomest. Tam ir arī onDrop balsts, kas norāda atzvanīšanas funkciju, kas darbosies, kad tajā nometīsit kādu komponentu.

Nometot velkamo komponentu uz nolaižamā, tiks palaists HandDrop metode. Šeit varat veikt jebkādu datu apstrādi.

Padomi lietotājam draudzīgu DnD komponentu izveidei

Ir dažas lietas, ko varat darīt, lai vilkšanas un nomešanas komponenti būtu lietotājam draudzīgāki.

Pirmkārt, jums ir jānodrošina vizuāla atgriezeniskā saite, kad elements tiek vilkts. Piemēram, varat mainīt elementa necaurredzamību vai pievienot apmali. Lai pievienotu vizuālos efektus, varat izmantot parasto CSS vai tailwind CSS savā React lietojumprogrammā.

Otrkārt, jums ir jāpārliecinās, ka lietotāji var vilkt elementu tikai uz derīgu nomešanas mērķi. Piemēram, jūs varētu pievienot veidi atribūtu elementam, kas norāda komponenta veidus, kurus tas pieņems.

Treškārt, jums ir jānodrošina veids, kā lietotājs var atcelt vilkšanas un nomešanas darbību. Piemēram, varat pievienot pogu, kas ļauj lietotājam atcelt darbību.

Uzlabojiet lietotāja pieredzi, izmantojot vilkšanu un nomešanu

Vilkšanas un nomešanas funkcija ne tikai palīdz uzlabot lietotāja pieredzi, bet arī var palīdzēt uzlabot jūsu tīmekļa lietojumprogrammas vispārējo veiktspēju. Lietotājs tagad var viegli pārkārtot dažu datu secību, neatsvaidzinot lapu vai veicot vairākas darbības.

Varat arī pievienot citas animācijas savā React lietotnē, lai vilkšanas un nomešanas funkciju padarītu interaktīvāku un lietotājam draudzīgāku.