I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.

Hai mai desiderato aggiungere funzionalità di trascinamento della selezione ai tuoi componenti React? Non è così difficile come potresti pensare.

Il trascinamento della selezione è un modo per spostare o manipolare elementi su uno schermo utilizzando un mouse o un touchpad. È perfetto per riordinare un elenco di elementi o spostare elementi da un elenco all'altro.

Puoi creare componenti drag-and-drop in React utilizzando uno dei due metodi: funzionalità integrate o un modulo di terze parti.

Diversi modi per implementare il trascinamento della selezione in React

Esistono due modi per implementare il trascinamento della selezione in React: utilizzando le funzionalità integrate di React o utilizzando un modulo di terze parti. A partire da creazione di un'applicazione React, quindi scegli il tuo metodo preferito.

Metodo 1: utilizzo delle funzionalità integrate

instagram viewer

In React, puoi utilizzare l'evento onDrag per tenere traccia di quando l'utente sta trascinando un elemento e l'evento onDrop per tenere traccia di quando lo rilasciano. È inoltre possibile utilizzare gli eventi onDragStart e onDragEnd per tenere traccia dell'avvio e dell'arresto del trascinamento.

Per rendere trascinabile un elemento, puoi impostare l'attributo draggable su true. Per esempio:

importare Reagisci, { Componente } da 'reagire';
classeIl mio componenteestendeComponente{
 rendere() {
ritorno (
<div
 trascinabile
 onDragStart={Questo.handleDragStart}
 suTrascina={Questo.handleDrag}
 onDragEnd={Questo.handleDragEnd}
>
 Trascinami!
</div>
 );
 }
}
esportarepredefinito Il mio componente;

Per rendere un elemento trascinabile, puoi creare i metodi handleDragStart, handleDrag e handleDragEnd. Questi metodi verranno eseguiti quando un utente trascina l'elemento e quando lo rilascia. Per esempio:

importare Reagisci, { Componente } da 'reagire';
classeIl mio componenteestendeComponente{
 handleDragStart (evento) {
// Questo metodo viene eseguito quando inizia il trascinamento
 console.log("Iniziato")
 }


handleDrag (evento) {
// Questo metodo viene eseguito quando il componente viene trascinato
 console.log("Trascinamento...")
 }


handleDragEnd (evento) {
// Questo metodo viene eseguito quando il trascinamento si interrompe
 console.log("Conclusa")
 }


rendere() {
ritorno (
<div
 trascinabile
 onDragStart={Questo.handleDragStart}
 suTrascina={Questo.handleDrag}
 onDragEnd={Questo.handleDragEnd}
>
 Trascinami!
</div>
 );
 }
}
esportarepredefinito Il mio componente;

Nel codice sopra, ci sono tre metodi per gestire il trascinamento di un elemento: handleDragStart, handleDrag e handleDragEnd. Il div ha un attributo trascinabile e imposta le proprietà onDragStart, onDrag e onDragEnd sulle funzioni corrispondenti.

Quando trascini l'elemento, il metodo handleDragStart verrà eseguito per primo. Qui è dove puoi eseguire qualsiasi configurazione di cui hai bisogno, come l'impostazione dei dati da trasferire.

Quindi, il metodo handleDrag viene eseguito ripetutamente mentre trascini l'elemento. Qui è dove puoi fare qualsiasi aggiornamento come regolare la posizione dell'elemento.

Infine, quando si rilascia l'elemento, viene eseguito il metodo handleDragEnd. Qui è dove puoi eseguire qualsiasi pulizia che devi fare, come ripristinare i dati che hai trasferito.

Puoi anche spostare il componente sullo schermo in onDragEnd(). Per fare ciò, dovrai impostare la proprietà style del componente. Per esempio:

importare Reagire, {Componente, useState} da 'reagire';
funzioneIl mio componente() {
cost [x, impostaX] = usaStato(0);
cost [y, setY] = useState(0);


cost handleDragEnd = (evento) => {
setX(evento.clientX);
setY(evento.clientY);
 };


ritorno (
<div
 trascinabile
 onDragEnd={handleDragEnd}
 stile={{
 posizione: "assoluto",
 sinistra: x,
 in alto: e
 }}
>
 Trascinami!
</div>
 );
}
esportarepredefinito Il mio componente;

Il codice chiama l'hook useState per tenere traccia della posizione x e y del componente. Quindi, nel metodo handleDragEnd, aggiorna la posizione x e y. Infine, puoi impostare la proprietà style del componente per posizionarlo nelle nuove posizioni x e y.

Metodo 2: utilizzo di un modulo di terze parti

Se non desideri utilizzare le funzionalità integrate di React, puoi utilizzare un modulo di terze parti come reagire trascinando e rilasciando. Questo modulo fornisce un wrapper specifico di React attorno all'API drag-and-drop HTML5.

Per utilizzare questo modulo, devi prima installarlo utilizzando npm:

npm installare reagire-trascinare-E-gocciolare--salva

Quindi, puoi usarlo nei tuoi componenti React:

importare Reagisci, { Componente } da 'reagire';
importare { Trascinabile, Rilasciabile } da 'reagisci-trascina e rilascia';
classeIl mio componenteestendeComponente{
 rendere() {
ritorno (
<div>
<Tipo trascinabile="pippo" dati="sbarra">
<div>Trascinami!</div>
</Draggable>


<Tipi rilasciabili={['pippo']} onDrop={this.handleDrop}>
<div>Scendi qui!</div>
</Droppable>
</div>
 );
 }


handleDrop (dati, evento) {
// Questo metodo viene eseguito quando i dati vengono eliminati
consolare.log (dati); // 'sbarra'
 }
}
esportarepredefinito Il mio componente;

Inizia importando i componenti Draggable e Droppable dal modulo react-drag-and-drop. Quindi, utilizza questi componenti per creare un elemento trascinabile e un elemento trascinabile.

Il componente Draggable accetta un oggetto di tipo, che specifica il tipo di dati che il componente rappresenta, e un oggetto di dati che specifica i dati da trasferire. Tieni presente che il tipo è un nome personalizzato che puoi scegliere per tenere traccia di quale componente è quale in un'interfaccia multicomponente.

Il componente Droppable utilizza una prop di tipi per specificare i tipi di dati che puoi rilasciare su di esso. Ha anche un prop onDrop, che specifica la funzione di callback che verrà eseguita quando si rilascia un componente su di esso.

Quando rilasci il componente trascinabile sul droppable, verrà eseguito il metodo handleDrop. Qui è dove puoi eseguire qualsiasi elaborazione che devi fare con i dati.

Suggerimenti per la creazione di componenti DnD intuitivi

Ci sono alcune cose che puoi fare per rendere i tuoi componenti di trascinamento della selezione più intuitivi.

Innanzitutto, dovresti fornire un feedback visivo quando un elemento viene trascinato. Ad esempio, puoi modificare l'opacità dell'elemento o aggiungere un bordo. Per aggiungere effetti visivi puoi usare i normali CSS o tailwind CSS nella tua applicazione React.

In secondo luogo, dovresti assicurarti che i tuoi utenti possano trascinare l'elemento solo su una destinazione di rilascio valida. Ad esempio, potresti aggiungere il file tipi attributo all'elemento, che specifica i tipi di componente che accetterà.

In terzo luogo, è necessario fornire all'utente un modo per annullare l'operazione di trascinamento della selezione. Ad esempio, potresti aggiungere un pulsante che consenta all'utente di annullare l'operazione.

Migliora l'esperienza utente con il trascinamento della selezione

La funzionalità di trascinamento della selezione non solo aiuta a migliorare l'esperienza dell'utente, ma può anche aiutare con le prestazioni complessive della tua applicazione web. Un utente può ora facilmente riorganizzare l'ordine di alcuni dati senza dover aggiornare la pagina o eseguire più passaggi.

Puoi anche aggiungere altre animazioni nella tua app React per rendere la funzione di trascinamento della selezione più interattiva e intuitiva.