react-beautiful-dnd ^(rbd)

Όμορφο και προσιτό drag και drop για λίστες με React

Παίξε αν θες με το παράδειγμα!

Κύρια χαρακτηριστικά

• Όμορφη και φυσική κίνηση των αντικειμένων 💐
• Προσιτό: δυναμική υποστήριξη πληκρολογίου και ανάγνωσης οθόνης ♿️
• Εξαιρετική επίδοση 🚀
• Καθαρό και ισχυρό 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 podcast: γρήγορο, προσβάσιμο και όμορφο 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 /> - Σε τι μπορεί να γίνει drag
• resetServerContext() - Χρησιμότητα εμφάνισης στην πλευρά εξυπηρετητή (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/Portuguese

Συγγραφέας ✍️

Alex Reardon @alexandereardon

Συνεργάτες 🤝

• Bogdan Chadkin @IAmTrySound
• Luke Batchelor @alukebatchelor
• Jared Crowe @jaredjcrowe
• Πολλοί άλλοι @Atlassian's!