Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών.

Θέλατε ποτέ να προσθέσετε λειτουργία μεταφοράς και απόθεσης στα στοιχεία του React; Δεν είναι τόσο δύσκολο όσο νομίζετε.

Η μεταφορά και απόθεση είναι ένας τρόπος μετακίνησης ή χειρισμού στοιχείων σε μια οθόνη χρησιμοποιώντας ποντίκι ή επιφάνεια αφής. Είναι ιδανικό για την αναδιάταξη μιας λίστας στοιχείων ή τη μετακίνηση στοιχείων από τη μια λίστα στην άλλη.

Μπορείτε να δημιουργήσετε στοιχεία μεταφοράς και απόθεσης στο React χρησιμοποιώντας μία από τις δύο μεθόδους: ενσωματωμένες δυνατότητες ή λειτουργική μονάδα τρίτου κατασκευαστή.

Διαφορετικοί τρόποι εφαρμογής Drag and Drop στο React

Υπάρχουν δύο τρόποι για να εφαρμόσετε το drag and drop στο React: χρησιμοποιώντας τις ενσωματωμένες δυνατότητες του React ή χρησιμοποιώντας μια λειτουργική μονάδα τρίτου κατασκευαστή. Ξεκινήστε από δημιουργία μιας εφαρμογής React, στη συνέχεια επιλέξτε τη μέθοδο που προτιμάτε.

instagram viewer

Μέθοδος 1: Χρήση ενσωματωμένων δυνατοτήτων

Στο React, μπορείτε να χρησιμοποιήσετε το συμβάν onDrag για να παρακολουθείτε πότε ο χρήστης σύρει ένα στοιχείο και το συμβάν onDrop για να παρακολουθείτε πότε το αφήνει. Μπορείτε επίσης να χρησιμοποιήσετε τα συμβάντα onDragStart και onDragEnd για να παρακολουθείτε πότε ξεκινά και πότε σταματά η μεταφορά.

Για να κάνετε ένα στοιχείο με δυνατότητα μεταφοράς, μπορείτε να ορίσετε το χαρακτηριστικό dragable σε true. Για παράδειγμα:

εισαγωγή React, { Component } από 'αντιδρώ';
τάξηMyComponentεκτείνεταιΣυστατικό{
 render() {
ΕΠΙΣΤΡΟΦΗ (
<div
 σύρσιμο
 onDragStart={Αυτό.handleDragStart}
 onDrag={Αυτό.handleDrag}
 onDragEnd={Αυτό.handleDragEnd}
>
 Σύρε με!
</div>
 );
 }
}
εξαγωγήΠροκαθορισμένο MyComponent;

Για να κάνετε ένα στοιχείο droppable, μπορείτε να δημιουργήσετε τις μεθόδους handleDragStart, handleDrag και handleDragEnd. Αυτές οι μέθοδοι θα εκτελούνται όταν ένας χρήστης σύρει το στοιχείο και όταν το αφήνει. Για παράδειγμα:

εισαγωγή React, { Component } από 'αντιδρώ';
τάξηMyComponentεκτείνεταιΣυστατικό{
 handleDragStart (συμβάν) {
// Αυτή η μέθοδος εκτελείται όταν ξεκινά η μεταφορά
 console.log("Ξεκίνησε")
 }


handleDrag (συμβάν) {
// Αυτή η μέθοδος εκτελείται όταν σύρεται το στοιχείο
 console.log("Σέρνοντας...")
 }


handleDragEnd (συμβάν) {
// Αυτή η μέθοδος εκτελείται όταν σταματήσει η μεταφορά
 console.log("Τελείωσε")
 }


render() {
ΕΠΙΣΤΡΟΦΗ (
<div
 σύρσιμο
 onDragStart={Αυτό.handleDragStart}
 onDrag={Αυτό.handleDrag}
 onDragEnd={Αυτό.handleDragEnd}
>
 Σύρε με!
</div>
 );
 }
}
εξαγωγήΠροκαθορισμένο MyComponent;

Στον παραπάνω κώδικα, υπάρχουν τρεις μέθοδοι χειρισμού της μεταφοράς ενός στοιχείου: handleDragStart, handleDrag και handleDragEnd. Το div έχει ένα χαρακτηριστικό dragable και ορίζει τις ιδιότητες onDragStart, onDrag και onDragEnd στις αντίστοιχες συναρτήσεις τους.

Όταν σύρετε το στοιχείο, η μέθοδος handleDragStart θα εκτελεστεί πρώτη. Εδώ μπορείτε να κάνετε οποιαδήποτε ρύθμιση θέλετε να κάνετε, όπως να ρυθμίσετε τα δεδομένα για μεταφορά.

Στη συνέχεια, η μέθοδος handleDrag εκτελείται επανειλημμένα ενώ σύρετε το στοιχείο. Εδώ μπορείτε να κάνετε οποιεσδήποτε ενημερώσεις, όπως προσαρμογή της θέσης του στοιχείου.

Τέλος, όταν ρίχνετε το στοιχείο, εκτελείται η μέθοδος handleDragEnd. Εδώ μπορείτε να κάνετε οποιαδήποτε εκκαθάριση πρέπει να κάνετε, όπως επαναφορά των δεδομένων που μεταφέρατε.

Μπορείτε επίσης να μετακινήσετε το στοιχείο στην οθόνη στο onDragEnd(). Για να το κάνετε αυτό, θα χρειαστεί να ορίσετε την ιδιότητα στυλ του στοιχείου. Για παράδειγμα:

εισαγωγή React, { Component, useState } από 'αντιδρώ';
λειτουργίαMyComponent() {
συνθ [x, setX] = useState(0);
συνθ [y, setY] = useState(0);


συνθ handleDragEnd = (γεγονός) => {
setX(Εκδήλωση.clientX);
σετY(Εκδήλωση.clientY);
 };


ΕΠΙΣΤΡΟΦΗ (
<div
 σύρσιμο
 onDragEnd={handleDragEnd}
 στυλ={{
 θέση: "απόλυτος",
 αριστερά: x,
 κορυφή: y
 }}
>
 Σύρε με!
</div>
 );
}
εξαγωγήΠροκαθορισμένο MyComponent;

Ο κωδικός καλεί το άγκιστρο useState για να παρακολουθεί τη θέση x και y του στοιχείου. Στη συνέχεια, στη μέθοδο handleDragEnd, ενημερώνει τη θέση x και y. Τέλος, μπορείτε να ορίσετε την ιδιότητα στυλ του στοιχείου ώστε να το τοποθετεί στις νέες θέσεις x και y.

Μέθοδος 2: Χρήση ενότητας τρίτων

Εάν δεν θέλετε να χρησιμοποιήσετε τις ενσωματωμένες δυνατότητες του React, μπορείτε να χρησιμοποιήσετε μια λειτουργική μονάδα τρίτου κατασκευαστή, όπως αντιδρώ-σύρω-και-απόθεση. Αυτή η λειτουργική μονάδα παρέχει ένα περιτύλιγμα ειδικά για το React γύρω από το HTML5 drag-and-drop API.

Για να χρησιμοποιήσετε αυτήν την ενότητα, πρέπει πρώτα να την εγκαταστήσετε χρησιμοποιώντας npm:

npm εγκαθιστώ αντιδρώ-σύρω-και-πτώση--αποθηκεύσετε

Στη συνέχεια, μπορείτε να το χρησιμοποιήσετε στα στοιχεία του React:

εισαγωγή React, { Component } από 'αντιδρώ';
εισαγωγή { Dragggable, Droppable } από 'αντίδραση-σύρε-και-απόθεση';
τάξηMyComponentεκτείνεταιΣυστατικό{
 render() {
ΕΠΙΣΤΡΟΦΗ (
<div>
<Σύρσιμος τύπος="foo" δεδομένα="μπαρ">
<div>Σύρε με!</div>
</Draggable>


<Τύποι με δυνατότητα πτώσης={['foo']} onDrop={this.handleDrop}>
<div>Πέτα εδώ!</div>
</Droppable>
</div>
 );
 }


handleDrop (δεδομένα, συμβάν) {
// Αυτή η μέθοδος εκτελείται όταν πέφτουν τα δεδομένα
κονσόλα.log (δεδομένα); // 'μπαρ'
 }
}
εξαγωγήΠροκαθορισμένο MyComponent;

Ξεκινήστε εισάγοντας τα στοιχεία Draggable και Droppable από τη λειτουργική μονάδα react-drag-and-drop. Στη συνέχεια, χρησιμοποιήστε αυτά τα στοιχεία για να δημιουργήσετε ένα στοιχείο με δυνατότητα μεταφοράς και ένα στοιχείο με δυνατότητα πτώσης.

Το στοιχείο Draggable δέχεται έναν τύπο prop, ο οποίος καθορίζει τον τύπο δεδομένων που αντιπροσωπεύει το στοιχείο, και ένα prop data που καθορίζει τα δεδομένα που θα μεταφερθούν. Σημειώστε ότι ο τύπος είναι ένα προσαρμοσμένο όνομα που μπορείτε να επιλέξετε για να παρακολουθείτε ποιο στοιχείο είναι ποιο σε μια διεπαφή πολλαπλών συστατικών.

Το στοιχείο Droppable χρησιμοποιεί ένα υποστήριγμα τύπων για να καθορίσει τους τύπους δεδομένων που μπορείτε να αποθέσετε σε αυτό. Διαθέτει επίσης ένα στήριγμα onDrop, το οποίο καθορίζει τη λειτουργία επανάκλησης που θα εκτελείται όταν ρίχνετε ένα στοιχείο σε αυτό.

Όταν αποθέσετε το στοιχείο με δυνατότητα μεταφοράς στο droppable, θα εκτελεστεί η μέθοδος handleDrop. Εδώ μπορείτε να κάνετε οποιαδήποτε επεξεργασία χρειάζεται να κάνετε με τα δεδομένα.

Συμβουλές για τη δημιουργία φιλικών προς τον χρήστη στοιχείων DnD

Υπάρχουν μερικά πράγματα που μπορείτε να κάνετε για να κάνετε τα στοιχεία μεταφοράς και απόθεσης πιο φιλικά προς το χρήστη.

Αρχικά, θα πρέπει να παρέχετε οπτική ανατροφοδότηση όταν σύρεται ένα στοιχείο. Για παράδειγμα, μπορείτε να αλλάξετε την αδιαφάνεια του στοιχείου ή να προσθέσετε ένα περίγραμμα. Για να προσθέσετε οπτικά εφέ, μπορείτε να χρησιμοποιήσετε κανονικό CSS ή tailwind CSS στην εφαρμογή React σας.

Δεύτερον, θα πρέπει να βεβαιωθείτε ότι οι χρήστες σας μπορούν να σύρουν το στοιχείο μόνο σε έναν έγκυρο στόχο απόθεσης. Για παράδειγμα, μπορείτε να προσθέσετε το τύπους χαρακτηριστικό στο στοιχείο, το οποίο καθορίζει τους τύπους του στοιχείου που θα δεχτεί.

Τρίτον, θα πρέπει να παρέχετε έναν τρόπο στον χρήστη να ακυρώσει τη λειτουργία μεταφοράς και απόθεσης. Για παράδειγμα, μπορείτε να προσθέσετε ένα κουμπί που επιτρέπει στον χρήστη να ακυρώσει τη λειτουργία.

Βελτιώστε την εμπειρία χρήστη με μεταφορά και απόθεση

Η δυνατότητα μεταφοράς και απόθεσης όχι μόνο βοηθά στη βελτίωση της εμπειρίας χρήστη, αλλά μπορεί επίσης να βοηθήσει στη συνολική απόδοση της εφαρμογής Ιστού σας. Ένας χρήστης μπορεί πλέον εύκολα να αναδιατάξει τη σειρά ορισμένων δεδομένων χωρίς να χρειάζεται να ανανεώσει τη σελίδα ή να περάσει από πολλά βήματα.

Μπορείτε επίσης να προσθέσετε άλλα κινούμενα σχέδια στην εφαρμογή React για να κάνετε τη λειτουργία μεταφοράς και απόθεσης πιο διαδραστική και φιλική προς το χρήστη.