- Όμορφη και φυσική κίνηση των αντικειμένων 💐
- Προσιτό: δυναμική υποστήριξη πληκρολογίου και ανάγνωσης οθόνης ♿️
- Εξαιρετική επίδοση 🚀
- Καθαρό και ισχυρό api που θα το βρει απλό κάποιος που θα αρχίσει να ασχολείται μαζί του
- Εκτελείται εξεραιτικά καλά με απλές αλληλεπιδράσεις ενός φυλλομετρητή
- Ανώνυμο στυλ
- Χωρίς δημιουργία επιπλέον περικαλλύματος για κόμβους του dom - flexbox και φιλικό σε διαχείρηση εστίασης!
Έχουμε δημιουργήσει ένα δωρεάν μάθημα στο egghead.io 🥚 για να σε βοηθήσουμε να ξεκινήσεις με react-beautiful-dnd όσο το δυνατόν γρηγορότερα.
- Κάθετες λίστες ↕
- Οριζόντιες λίστες ↔
- Κίνηση μεταξύ λιστών (▤ ↔ ▤)
- Υποστήριξη εικονικής λίστας 👾 - ξεκλείδωμα 10,000 αντικειμένων @ 60fps
- Συνδυασμός αντικειμένων
- Υποστήριξη για ποντίκι 🐭, πληκτρολόγιο 🎹♿️ και αφή 👉📱 (κινητό, tablet..)
- Υποστήριξη για πολλαπλό drag
- Απίστευτη υποστήριξη σε ανάγνωση οθόνης ♿️ - παρέχουμε εκπληκτική εμπειρία σε εργαλεία ανάγνωσης οθόνης στα αγγλικά. Παρέχουμε επιπλέον πλήρη παραμετροποίηση ελέγχων και διεθνή υποστήριξη σε αυτούς που τη χρειάζονται 💖
- Υποθετικό dragging και υποθετικό dropping
- Πολλαπλές ανεξάρτητες λίστες σε μια σελίδα
- Ελαστικά μεγέθη αντικειμένων - τα draggable αντικείμενα μπορούν να έχουν διαφορετικά ύψη (κάθετες λίστες) ή πλάτη (οριζόντιες λίστες)
- Πρόσθεσε και αφαίρεσε αντικείμενα κατα τη διάρκεια ενός drag
- Συμβατότητα με σημασιολογική αναταξινόμηση
<table>- πρότυπα table - Αυτόματο scrolling - αυτόματο scroll των κιβωτίων και του παραθύρου όπως απαιτείται κατά τη διάρκεια ενός drag (ακόμα και με πληκτρολόγιο 🔥)
- Παραμετροποίηση χειρισμού drag - μπορείς να κάνεις drag ένα ολόκληρο αντικείμενο ή ένα μέρος του.
- Δυνατότητα να μετακινήσεις ένα drag αντικείμενο σε ένα άλλο αντικείμενο ενώ κάνεις drag - Αλλαγή προγόνου
<Draggable /> - Δημιουργία σεναρίου για drag και drop εμπειριών 🎮
- Επιτρέπει επεκτάσεις για να υποστηρίζουν οποιαδήποτε είσοδο θέλεις 🕹
- 🌲 Υποστήριξη δένδρου μέσω
@atlaskit/treeπακέτου - Μια
<Droppable />λίστα μπορεί να είνα ένα scroll κιβώτιο (χωρίς πατέρα που κάνει scroll) ή να είναι παιδί ενός scroll κιβωτίου (αυτό επίσης δεν έχει πατέρα που κάνει scroll) - Ανεξάρτητες εμφωλευμένες λίστες - μία λίστα μπορεί να είνα παιδί μια άλλης λίστας, αλλά δεν μπορείς να κάνεις drag σε αντικείμενα από μια λίστα πατέρα σε μια λίστα παιδί
- Συμβατότητα εμφάνισης στην πλευρά εξυπηρετητή (SSR) - δες resetServerContext()
- Εκτελείται σωστά με εμφωλευμένα διαδραστικά αντικείμενα βάσει προτύπου
react-beautiful-dnd υπάρχει για να δημιουργεί όμορφο drag και drop για λίστες που οποιοσδήποτε μπορεί να χρησιμοποιήσει - ακόμη και άνθρωποι που δεν βλέπουν. Για μια καλή ανασκόπηση της ιστορίας και του κινήτρου της εργασίας, μπορείς να δεις αυτές τις εξωτερικές πηγές:
Υπάρχουν πολλές βιβλιοθήκες που επιτρέπουν drag και drop διαδράσεις στη React. Η πιο αξιοσημείωτη είναι η react-dnd. Μπορεί να κάνει απίστευτη δουλειά στο να παρέχει ένα σπουδαίο σύνολο από drag και drop πρωτόγονα που δουλεύουν ειδικά καλά με άγρια ασυνέπεια html5 drag και drop χαρακτηριστικό. react-beautiful-dnd είναι υψηλού επιπέδου αφαίρεση ειδικά φτιαγμένο για λίστες (κάθετη, οριζόντια, κίνηση μεταξύ λιστών, εμφωλευμένες λίστες..). Μέσα σε αυτό το υποσύνο λειτουργιών ηreact-beautiful-dnd προσφέρει μια ισχυρή, φυσική και όμορφη εμπειρία drag και drope. Ωστόσο, δεν μπορεί να παρέχει το πλάτος των λειτουργιών που παρέχονται από τη react-dnd. Οπότε η react-beautiful-dnd μπορεί να μην είναι για εσένα, εξαρτάται για την περίπτωση που το θέλεις.
- Εγκατάσταση
- Παραδείγματα και δείγματα
- Ξεκίνα από εδώ
- Αρχές σχεδίασης
- Κινούμενα σχέδια
- Προσβασιμότητα
- Υποστήριξη φυλλομετρητή
Οι τρόποι με τους οποίους κάποιος μπορεί να ξεκινήσει και να ελέγχει ένα drag
- Drag με ποντίκι 🐭
- Drag με αφή 👉📱
- Drag με πληκτρολόγιο 🎹♿️
- Δημιούργησε το δικό σου αισθητήρα (επιτρέπει κάθε τύπο εισόδου αν είναι εμπειρία σεναρίου)
<DragDropContext />- Τυλίγει το κομμάτι της εφαρμογής που θέλεις να έχει ενεργοποιημένο το drag και drop<Droppable />- Μια περιοχή που μπορεί να γίνει drop. Περιέχει<Draggable />s<Draggable />- Σε τι μπορεί να γίνει dragresetServerContext()- Χρησιμότητα εμφάνισης στην πλευρά εξυπηρετητή (SSR)
<DragDropContext />ανταποκριτές -onDragStart,onDragUpdate,onDragEndκαιonBeforeDragStart- Συνδυάζει τα
<Draggable /> - Συνήθη προβλήματα εγκατάστασης
- Χρησιμοποιώντας
innerRef - Ρύθμιση ανίχνευσης προβλημάτων και αποκατάσταση σφαλμάτων
- Κανόνες για
draggableIdκαιdroppableIds - Διατήρηση εστίασης προγράμματος περιήγησης
- Προσαρμογή ή παράλειψη των κινούμενων σχεδίων
- Αυτόματο scrol
- Έλεγχος της οθόνης ανάγνωσης
- Χρήση html5
doctype TypeScriptκαιflow: τύπος πληροφορίας- Drag σε
<svg> - Αποφυγή τρεμοπαίγματος της εικόνας
- Μη ορατά προεπιλεγμένα στυλ
- Πώς εντοπίζουμε τα δοχεία κύλισης
- Πώς χρησιμοποιούμε τα συμβάντα dom - Useful if you need to build on top of
react-beautiful-dnd - Προσθέτοντας
<Draggable />κατα τη διάρκεια ενός drag (11.x behaviour) - _⚠️ Προχωρημένα - Ρύθμιση πολιτικής ασφάλειας περιεχομένου
- Εικονικές λίστες 👾
- Πολλαπλό drag
- Πίνακες
- Αλλαγή πατέρα σε
<Draggable />- Χρησιμοποιώντας το δικό μας αντίγραφο διεπαφής προγραμματισμού εφαρμογών ή τη δική μας πύλη
- Μηχανική υγεία
- Κοινότητα και πρόσθετα
- Δημοσίευση σημειώσεων και αρχείου αλλαγών
- Αναβάθμιση
- Βήματα
- Μέσα μαζικής ενημέρωσης
English
한글/Korean
На русском/Russian
Português/PortugueseAlex Reardon @alexandereardon
- Bogdan Chadkin @IAmTrySound
- Luke Batchelor @alukebatchelor
- Jared Crowe @jaredjcrowe
- Πολλοί άλλοι @Atlassian's!