Awesome

<p align="center"> <img src="https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png" alt="react beautiful dnd logo" /> </p> <h1 align="center">react-beautiful-dnd <small><sup>(rbd)</sup></small></h1> <div align="center">

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

Παράδειγμα εφαρμογής

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

</div>

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

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