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

Το Drag and drop είναι ένα βασικό χαρακτηριστικό που ενισχύει την αλληλεπίδραση με τον χρήστη και διευκολύνει μια απρόσκοπτη εμπειρία χρήστη. Είτε θέλετε να δημιουργήσετε ένα πρόγραμμα μεταφόρτωσης αρχείων, μια λίστα με δυνατότητα ταξινόμησης ή ένα διαδραστικό παιχνίδι, Η κατανόηση του πώς να αξιοποιήσετε τις δυνατότητες αυτού του API είναι μια κρίσιμη ικανότητα που πρέπει να έχετε στον ιστό σας εργαλειοθήκη ανάπτυξης.

Τα βασικά του Drag and Drop σε HTML

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

Για να εφαρμόσετε το drag and drop, πρέπει να πείτε στο πρόγραμμα περιήγησης ποια στοιχεία θέλετε να μπορούν να συρθούν. Για να γίνει ένα στοιχείο σύρσιμο από το χρήστη, αυτό το στοιχείο θα πρέπει να έχει α

instagram viewer
σύρσιμοΧαρακτηριστικό HTML οριστεί σε αληθής, σαν αυτό:

<divdraggable="true">This element is draggablediv>

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

Μπορείτε να προσαρμόσετε αυτήν την εικόνα παρέχοντας τη δική σας εικόνα. Για να το κάνετε αυτό, επιλέξτε το στοιχείο με δυνατότητα μεταφοράς από το DOM, δημιουργήστε μια νέα εικόνα που θα αντιπροσωπεύει την προσαρμοσμένη εικόνα σχολίων και προσθέστε μια dragstart σύρετε το πρόγραμμα ακρόασης συμβάντων ως εξής:

let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
 event.dataTransfer.setDragImage(img, 10, 10);
})

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

Εάν θέλετε να επιτρέψετε μια πτώση, πρέπει να αποτρέψετε την προεπιλεγμένη συμπεριφορά ακυρώνοντας και τα δύο dragenter και ντραγκόβερ εκδηλώσεις, όπως αυτό:

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

Κατανόηση της διεπαφής DragEvent

Χαρακτηριστικά JavaScript α DragEvent διεπαφή που αντιπροσωπεύει μια αλληλεπίδραση μεταφοράς και απόθεσης από τον χρήστη. Παρακάτω είναι μια λίστα πιθανών τύπων συμβάντων κάτω από το DragEvent διεπαφή.

  • σέρνω: Ο χρήστης ενεργοποιεί αυτό το συμβάν ενώ σύρει ένα στοιχείο.
  • dragend: Αυτό το συμβάν ενεργοποιείται όταν τελειώνει η λειτουργία μεταφοράς ή όταν ο χρήστης τη διακόπτει. Μια τυπική λειτουργία μεταφοράς μπορεί να τερματιστεί αφήνοντας το κουμπί του ποντικιού ή πατώντας το πλήκτρο διαφυγής.
  • dragenter: Ένα στοιχείο που έχει συρθεί ενεργοποιεί αυτό το συμβάν όταν εισάγει έναν έγκυρο στόχο πτώσης.
  • σέρνεται: Όταν το στοιχείο που σύρεται αφήνει έναν στόχο πτώσης, αυτό το συμβάν ενεργοποιείται.
  • ντραγκόβερ: Όταν ο χρήστης σύρει ένα στοιχείο με δυνατότητα μεταφοράς πάνω από έναν στόχο πτώσης, το συμβάν ενεργοποιείται.
  • dragstart: Το συμβάν ενεργοποιείται κατά την έναρξη μιας λειτουργίας συρμού.
  • πτώση: Ο χρήστης ενεργοποιεί αυτό το συμβάν όταν ρίχνει ένα στοιχείο σε έναν στόχο πτώσης.

Όταν σύρετε ένα αρχείο στο πρόγραμμα περιήγησης από περιβάλλον εκτός του προγράμματος περιήγησης (για παράδειγμα, ο διαχειριστής αρχείων του λειτουργικού συστήματος), το πρόγραμμα περιήγησης δεν ενεργοποιεί dragstart ή dragend εκδηλώσεις.

DragEvent μπορεί να είναι χρήσιμο εάν θέλετε να αποστείλετε ένα προσαρμοσμένο συμβάν μεταφοράς μέσω προγραμματισμού. Για παράδειγμα, αν θέλετε να α div για να ενεργοποιήσετε προσαρμοσμένα συμβάντα μεταφοράς κατά τη φόρτωση της σελίδας, ορίστε πώς το κάνετε. Πρώτα, δημιουργήστε ένα νέο έθιμο DragEvent() σαν αυτό:

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

Στο μπλοκ κωδικών παραπάνω, customDragStartEvent αντιπροσωπεύει ένα παράδειγμα του DragEvent(). Σε customDragStartEvent, υπάρχουν δύο ορίσματα κατασκευαστή. Το πρώτο αντιπροσωπεύει τον τύπο συμβάντος μεταφοράς, ο οποίος μπορεί να είναι ένας από τους επτά τύπους συμβάντων που αναφέρθηκαν προηγουμένως.

Το δεύτερο όρισμα είναι ένα αντικείμενο με α μεταφορά δεδομένων κλειδί που αντιπροσωπεύει ένα παράδειγμα του Μεταφορά δεδομένων, για το οποίο θα μάθετε περισσότερα αργότερα σε αυτόν τον οδηγό. Στη συνέχεια, πιάστε το στοιχείο από το οποίο θέλετε να ενεργοποιήσετε το συμβάν, από το Μοντέλο αντικειμένου εγγράφου (DOM).

const draggableElement = document.querySelector("#draggable");

Στη συνέχεια, προσθέστε, οι ακροατές συμβάντων έχουν ως εξής:

 draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
 event.dataTransfer.setData('text/plain', 'Hello, world!'); 
 });
 draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
 });

Στο πρώτο πρόγραμμα ακρόασης συμβάντος παραπάνω, η λειτουργία συνάρτησης επανάκλησης καταγράφει το κείμενο, "Η μεταφορά ξεκίνησε!" και επικαλείται το setData μέθοδος στο μεταφορά δεδομένων ιδιοκτησία στο Εκδήλωση αντικείμενο. Τώρα, μπορείτε να ενεργοποιήσετε τα προσαρμοσμένα συμβάντα όπως αυτό:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Μεταφορά δεδομένων με μεταφορά δεδομένων

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

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

Χρησιμοποιώντας τη setData() στα δεδομένα πακέτου

Για να μεταφέρετε δεδομένα από ένα στοιχείο με δυνατότητα μεταφοράς σε ένα με δυνατότητα απόθεσης, θα χρησιμοποιήσετε το setData() μέθοδο που παρέχεται από το μεταφορά δεδομένων αντικείμενο. Αυτή η μέθοδος σάς επιτρέπει να πακετάρετε τα δεδομένα που θέλετε να μεταφέρετε και να καθορίσετε τον τύπο δεδομένων. Ακολουθεί ένα βασικό παράδειγμα:

element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Όταν ένας χρήστης αρχίζει να σύρει το καθορισμένο στοιχείο, setData() συσκευάζει το κείμενο "Hello, world!" με τον τύπο δεδομένων κείμενο/απλό. Αυτά τα δεδομένα συσχετίζονται τώρα με το συμβάν μεταφοράς και μπορούν να προσπελαστούν από το droppable target κατά τη λειτουργία απόθεσης.

Ανάκτηση δεδομένων με getData()

Στο άκρο λήψης, στο πρόγραμμα ακρόασης συμβάντων ενός droppable στοιχείου, μπορείτε να ανακτήσετε τα μεταφερόμενα δεδομένα χρησιμοποιώντας το getData() μέθοδος:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

Το παραπάνω μπλοκ κώδικα ανακτά τα δεδομένα με τον ίδιο τύπο δεδομένων (κείμενο/απλό) που ορίστηκε χρησιμοποιώντας το setData() μέθοδος νωρίτερα. Αυτό σας επιτρέπει να έχετε πρόσβαση και να χειρίζεστε τα μεταφερόμενα δεδομένα, όπως απαιτείται, εντός του πλαισίου του droppable στοιχείου.

Χρησιμοποιήστε θήκες για διεπαφές μεταφοράς και απόθεσης

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

  • Φορτωτές αρχείων: Επιτρέποντας στους χρήστες να σύρουν αρχεία απευθείας από την επιφάνεια εργασίας ή τη διαχείριση αρχείων τους σε μια καθορισμένη περιοχή απόθεσης απλοποιεί τη διαδικασία μεταφόρτωσης.
  • Λίστες με δυνατότητα ταξινόμησης: Εάν η εφαρμογή σας περιλαμβάνει λίστες στοιχείων, όπως λίστες εργασιών, λίστες αναπαραγωγής ή γκαλερί εικόνων, οι χρήστες μπορεί να εκτιμήσουν τη δυνατότητα αναδιάταξης στοιχείων μέσω μεταφοράς και απόθεσης.
  • Διαδραστικοί πίνακες ελέγχου: Για εργαλεία οπτικοποίησης και αναφοράς δεδομένων, το drag and drop μπορεί να είναι ένας ισχυρός τρόπος για τους χρήστες να προσαρμόσουν τους πίνακες εργαλείων τους αναδιατάσσοντας γραφικά στοιχεία και γραφήματα.

Έχοντας κατά νου την προσβασιμότητα

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