Το HTML5 drag-and-drop (DnD) API σημαίνει ότι σχεδόν οποιοδήποτε στοιχείο σε μια σελίδα μπορεί να γίνει σύρσιμο. Σε αυτό το άρθρο, θα καλύψουμε τα βασικά της μεταφοράς και απόθεσης.
Δημιουργήστε περιεχόμενο με δυνατότητα μεταφοράς
Αξίζει να σημειωθεί ότι στα περισσότερα προγράμματα περιήγησης, οι επιλογές κειμένου, οι εικόνες και οι σύνδεσμοι μπορούν να μεταφερθούν από προεπιλογή. Για παράδειγμα, εάν σύρετε το λογότυπο Google στην Αναζήτηση Google, θα δείτε μια εικόνα φάντασμα. Στη συνέχεια, η εικόνα μπορεί να συρθεί και να αποτεθεί στη γραμμή διευθύνσεων, <input type="file" /> στοιχείο ή ακόμα και στην επιφάνεια εργασίας. Για να κάνετε άλλους τύπους περιεχομένου με δυνατότητα μεταφοράς, πρέπει να χρησιμοποιήσετε το HTML5 DnD API.
Για να κάνετε ένα αντικείμενο σύρσιμο, ορίστε το στοιχείοdraggable=αληθές。 Η μεταφορά μπορεί να υποστηριχθεί για σχεδόν οποιοδήποτε στοιχείο, συμπεριλαμβανομένων εικόνων, αρχείων, συνδέσμων, αρχείων ή οποιασδήποτε σήμανσης σε μια σελίδα.
Στο παράδειγμά μας, θα δημιουργήσουμε μια διεπαφή για να αναδιατάξουμε ορισμένες στήλες, οι οποίες έχουν διαμορφωθεί μέσω του CSS Grid. Η βασική σήμανση για αυτές τις στήλες φαίνεται παρακάτω, με την ιδιότητα draggable να έχει οριστεί σε true για κάθε στήλη.
Εδώ είναι το CSS για τα στοιχεία του κοντέινερ και του κουτιού μου. Σημειώστε ότι το μόνο CSS που σχετίζεται με τη λειτουργικότητα του DnD είναι η ιδιότητα cursor: move. Ο υπόλοιπος κώδικας ελέγχει μόνο τη διάταξη και το στυλ των στοιχείων κοντέινερ και κουτιού.
Σε αυτό το σημείο, θα δείτε ότι μπορείτε να σύρετε το στοιχείο αλλά δεν θα συμβεί τίποτα άλλο. Για να προσθέσουμε λειτουργικότητα DnD, πρέπει να χρησιμοποιήσουμε το JavaScript API.
Ακρόαση συμβάντων μεταφοράς
Πολλά διαφορετικά συμβάντα μπορούν να επισυναφθούν για την παρακολούθηση ολόκληρης της διαδικασίας μεταφοράς και απόθεσης.
- Σύρετε το κουμπί
- σέρνω
- dragenter
- dragleave
- Dragover
- σταγόνα
- σύρω
Για να επεξεργαστείτε μια ροή DnD, χρειάζεστε κάποιο είδος στοιχείου πηγής (το σημείο εκκίνησης της μεταφοράς), το ωφέλιμο φορτίο δεδομένων (αυτό που προσπαθείτε να τοποθετήσετε) και τον στόχο (την περιοχή όπου τοποθετείται το snap). Τα στοιχεία πηγής μπορεί να είναι εικόνες, λίστες, σύνδεσμοι, αντικείμενα αρχείων, μπλοκ HTML κ.λπ. Ο στόχος είναι να αποδεχτείτε τη ζώνη απόθεσης (ή το σύνολο των ζωνών απόθεσης) των δεδομένων που προσπαθεί να τοποθετήσει ο χρήστης. Λάβετε υπόψη ότι δεν μπορούν όλα τα στοιχεία να είναι στόχοι, για παράδειγμα, οι εικόνες δεν μπορούν να είναι στόχοι.
Έναρξη και τερματισμός της ακολουθίας μεταφοράς και απόθεσης
Αφού ορίσετε την ιδιότητα draggable="true" στο περιεχόμενο, επισυνάψτε ένα πρόγραμμα χειρισμού συμβάντων dragstart για να ξεκινήσετε την ακολουθία DnD για κάθε στήλη.
Αυτός ο κώδικας θα ορίσει την αδιαφάνεια της στήλης στο 40% όταν ο χρήστης αρχίσει να σύρει και, στη συνέχεια, θα την επαναφέρει στο 100% στο τέλος του συμβάντος μεταφοράς.
Τα αποτελέσματα μπορείτε να τα δείτε στο demo του Glitch παρακάτω. Σύρετε ένα στοιχείο και θα γίνει αδιαφανές. Δεδομένου ότι το συμβάν dragstart στοχεύει το στοιχείο προέλευσης, η ρύθμιση του this.style.opacity σε 40% δίνει στον χρήστη οπτική ανατροφοδότηση ότι το τρέχον επιλεγμένο στοιχείο μετακινείται. Μετά την τοποθέτηση του στοιχείου, το στοιχείο προέλευσης επανέρχεται σε 100% αδιαφάνεια, αν και η λειτουργία τοποθέτησης δεν έχει γραφτεί ακόμα.
Χρησιμοποιήστε dragenter, dragover και dragleave για να προσθέσετε επιπλέον οπτικές ενδείξεις
Για να βοηθήσετε τους χρήστες να κατανοήσουν πώς να αλληλεπιδρούν με το περιβάλλον εργασίας σας, χρησιμοποιήστε προγράμματα χειρισμού συμβάντων dragenter, dragover και dragleave. Στο παρακάτω παράδειγμα, οι στήλες μπορούν να μεταφερθούν ή να προβληθούν. Για να βοηθηθούν οι χρήστες να το καταλάβουν αυτό, όταν ο χρήστης σύρει ένα στοιχείο πέρα από μια στήλη, το περίγραμμα αυτής της στήλης γίνεται μια διακεκομμένη γραμμή. Για παράδειγμα, μπορείτε να δημιουργήσετε μια κλάση over στο CSS για να αναπαραστήσετε ένα στοιχείο που είναι στόχος τοποθέτησης:
Στη συνέχεια, ρυθμίστε ένα πρόγραμμα χειρισμού συμβάντων σε JavaScript για να προσθέσετε την κλάση over όταν σύρετε μια στήλη και να την αφαιρέσετε όταν φεύγετε. Στον χειριστή dragend, θέλουμε επίσης να βεβαιωθούμε ότι η κλάση αφαιρείται στο τέλος της μεταφοράς.
Υπάρχουν μερικά σημεία που πρέπει να αναφέρουμε σε αυτόν τον κώδικα:
Όταν σύρετε ένα στοιχείο όπως έναν σύνδεσμο, πρέπει να αποκλείσετε την προεπιλεγμένη συμπεριφορά του προγράμματος περιήγησης, η οποία είναι η πλοήγηση σε αυτόν τον σύνδεσμο. Για να το κάνετε αυτό, καλέστε το e.preventDefault() στο συμβάν dragover. Μια άλλη καλή πρακτική είναι να επιστρέφετε false στον ίδιο χειριστή.
Χρησιμοποιήστε το πρόγραμμα χειρισμού συμβάντων dragenter για εναλλαγή κλάσεων και όχι μεταφοράς. Εάν χρησιμοποιείτε dragover, η κλάση CSS εναλλάσσεται πολλές φορές, επειδή το dragover συμβάντων συνεχίζει να ενεργοποιείται όταν η στήλη αιωρείται. Τελικά, αυτό θα αναγκάσει το πρόγραμμα απόδοσης του προγράμματος περιήγησης να κάνει πολλή περιττή εργασία. Είναι καλύτερο να περιορίζετε πάντα την επανασχεδίαση στο ελάχιστο. Εάν πρέπει να χρησιμοποιήσετε συμβάντα μεταφοράς για κάποιο λόγο, εξετάστε το ενδεχόμενο να περιορίσετε ή να αφαιρέσετε προγράμματα ακρόασης συμβάντων.
Ολοκληρώστε την τοποθέτηση
Για να χειριστείτε την πραγματική τοποθέτηση, προσθέστε ένα πρόγραμμα ακρόασης συμβάντος για το συμβάν απόθεσης. Σε ένα πρόγραμμα χειρισμού πτώσης, πρέπει να αποκλείσετε την προεπιλεγμένη συμπεριφορά τοποθέτησης του προγράμματος περιήγησης, η οποία είναι συνήθως κάποιο είδος ενοχλητικής ανακατεύθυνσης. Το e.stopPropagation() μπορεί να κληθεί για να αποτρέψει το συμβάν από το να ενεργοποιήσει το DOM.
Βεβαιωθείτε ότι έχετε καταχωρήσει τον νέο δείκτη χειρισμού στον άλλο δείκτη χειρισμού:
Εάν εκτελέσετε τον κώδικα αυτήν τη στιγμή, το έργο δεν θα τοποθετηθεί σε νέα θέση. Για να το πετύχετε αυτό, πρέπει να χρησιμοποιήσετε ένα αντικείμενο DataTransfer.
Η ιδιότητα dataTransfer είναι εκεί όπου συμβαίνουν όλα τα θαύματα του DnD. Αποθηκεύει τα θραύσματα δεδομένων που αποστέλλονται στη λειτουργία μεταφοράς. Το dataTransfer ορίζεται στο συμβάν dragstart και διαβάζεται/υποβάλλεται σε επεξεργασία στο συμβάν drop. Καλέστε το e.dataTransfer.setData(mimeType, dataPayload) για να ορίσετε τον τύπο MIME και το ωφέλιμο φορτίο δεδομένων του αντικειμένου.
Στο παρακάτω παράδειγμα, θα επιτρέψουμε στους χρήστες να αναδιατάξουν τη σειρά των στηλών. Για να το κάνετε αυτό, πρέπει πρώτα να αποθηκεύσετε το HTML του στοιχείου προέλευσης στην αρχή της μεταφοράς:
Χειριστείτε την τοποθέτηση στήλης στο συμβάν απόθεσης, ορίστε το HTML της στήλης προέλευσης στο HTML της στήλης προορισμού όπου τοποθετείται, ελέγξτε πρώτα ότι η στήλη προορισμού που σύρθηκε και αποτέθηκε από τον χρήστη είναι ίδια με τη στήλη προέλευσης.
Περισσότερες ιδιότητες μεταφοράς
Το αντικείμενο dataTransfer εκθέτει ιδιότητες που χρησιμοποιούνται για την παροχή οπτικής ανάδρασης στο χρήστη κατά τη διάρκεια της διαδικασίας μεταφοράς. Αυτές οι ιδιότητες μπορούν επίσης να χρησιμοποιηθούν για τον έλεγχο του τρόπου με τον οποίο κάθε στόχος τοποθέτησης ανταποκρίνεται σε συγκεκριμένους τύπους δεδομένων.
- Το dataTransfer.effectAllowed περιορίζει τον "τύπο μεταφοράς" που μπορεί να εκτελέσει ένας χρήστης σε ένα στοιχείο. Χρησιμοποιείται στο μοντέλο χειρισμού μεταφοράς και απόθεσης για την προετοιμασία του dropEffect κατά τη διάρκεια συμβάντων dragenter και dragover. Αυτή η ιδιότητα μπορεί να οριστεί στις ακόλουθες τιμές: none, copy, copyLink, copyMove, link, linkMove, move, all και uninitialized.
- Το dataTransfer.dropEffect ελέγχει την ανατροφοδότηση που παρέχεται στον χρήστη κατά τη διάρκεια συμβάντων dragenter και dragover. Όταν ο χρήστης τοποθετεί το δείκτη του ποντικιού πάνω από το στοιχείο προορισμού, ο κέρσορας του προγράμματος περιήγησης θα υποδείξει τον τύπο της ενέργειας που πρέπει να εκτελεστεί (π.χ. αντιγραφή, μετακίνηση κ.λπ.). Το αποτέλεσμα μπορεί να είναι μία από τις ακόλουθες τιμές: καμία, αντιγραφή, σύνδεση, μετακίνηση.
- e.dataTransfer.setDragImage(imgElement, x, y) υποδεικνύει ότι δεν χρησιμοποιείται η προεπιλεγμένη ανάδραση "εικόνας φάντασμα" του προγράμματος περιήγησης και αντ' αυτού υπάρχει μια επιλογή για να ορίσετε το εικονίδιο μεταφοράς.
Μεταφορτώστε αρχεία με μεταφορά και απόθεση
Το παρακάτω απλό παράδειγμα χρησιμοποιεί μια στήλη ως πηγή μεταφοράς και στόχο μεταφοράς. Αυτό μπορεί να φανεί στο περιβάλλον εργασίας χρήστη όταν ζητείται από τον χρήστη να αναδιατάξει τα στοιχεία. Σε ορισμένες περιπτώσεις, η μεταφορά του στόχου και η μεταφορά της πηγής μπορεί να είναι διαφορετικές, όπως σε μια διεπαφή όπου ο χρήστης πρέπει να επιλέξει μια εικόνα ως κύρια εικόνα του προϊόντος σύροντας την επιλεγμένη εικόνα στον στόχο.
Η μεταφορά και απόθεση χρησιμοποιούνται συχνά για να επιτρέπουν στους χρήστες να μεταφέρουν στοιχεία από την επιφάνεια εργασίας στην εφαρμογή. Η κύρια διαφορά είναι ο χειριστής πτώσης. Χωρίς τη χρήση του dataTransfer.getData() για πρόσβαση στο αρχείο, τα δεδομένα του αρχείου θα συμπεριληφθούν στην ιδιότητα dataTransfer.files:
Αρχικός σύνδεσμος:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
|
Δημοσιεύτηκε στις 2022-4-26 10:30:50
|
|
|
|
Δημοσιεύτηκε στις 2022-4-26 21:27:25
|
