Προσθήκη Drag & Drop στην ιστοσελίδα Εύκολα με Dragula

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

Αυτό το δωρεάν σενάριο σάς επιτρέπει προσθέστε λειτουργίες μεταφοράς και απόθεσης για οποιοδήποτε στοιχείο στη σελίδα σας. Αυτό περιλαμβάνει υποστήριξη για τα πλαίσια React & AngularJS, μαζί με τη βανίλια JavaScript.

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

Αν πάρετε μια ματιά στο live demo θα βρείτε μερικά αποσπάσματα κώδικα, μαζί με χρησιμοποιήσιμα δείγματα.

Η ρύθμιση Dragula απαιτεί μόνο ένα αρχείο JavaScript για να λειτουργήσει. Παρόλο που οι επιπλέον επιλογές μπορούν να μπερδευτούν λίγο.

Για παράδειγμα, ας πούμε ότι έχετε δύο κοντέινερ, #αριστερά και #σωστά, που θέλετε να υποστηρίξετε αντικείμενα που μπορούν να μεταφερθούν. Θα πρέπει να προσθέστε χειροκίνητα αυτά τα δοχεία στη λειτουργία Dragula για να υποστηρίξετε τις μεθόδους μεταφοράς και απόθεσης.

Αν δεν έχετε μια σταθερή αντίληψη των θεμελιωδών στοιχείων της ανάπτυξης του μπροστινού μέρους, τότε θα προσπαθήσετε να χρησιμοποιήσετε το Dragula. Αλλά, το repo GitHub έχει πολλά υπέροχα παραδείγματα που μπορείτε να ακολουθήσετε μαζί και ακόμα αποσπάσματα κώδικα που μπορείτε να αντιγράψετε.

Εδώ είναι ένα δείγμα από το GitHub docs για το πώς να στοχεύστε τα δύο (αριστερά και δεξιά) δοχεία:

 dragula ([document.querySelector ('# αριστερά'), document.querySelector ('# δεξιά')]); 

Σημειώστε εάν εξετάζετε περαιτέρω τη σελίδα GitHub που θα βρείτε μια τεράστια λίστα επιλογών μπορείτε να περάσετε σε αυτή τη λειτουργία.

Μπορείς να διαλέξεις είτε να αντιγράψετε είτε να μετακινήσετε αντικείμενα, ποιο δοχείο (ες) υποστηρίζει τα παρασυρμένα στοιχεία και ακόμα λειτουργίες επανάκλησης που λειτουργούν με διαφορετικές συμπεριφορές χρηστών όπως:

• Τοποθετώντας το δείκτη πάνω από ένα δοχείο
• Αρχική εκκίνηση κλικ & σύμπτυξης
• Εκτέλεση συμβάντος
• Πτώση ενός στοιχείου από τα όρια
• Κλωνοποίηση στοιχείου / δοχείου με σύρσιμο

Αυτή η βιβλιοθήκη θα κάνει κάποια αρχική εργασία αλλά αν είστε εξοικειωμένοι με το JavaScript θα πρέπει να είναι ένα no-brainer.

Κοιτάξτε στη σελίδα επίδειξης στο Δες πως δουλεύει και στο πάρτε μερικές ιδέες κώδικα δείγματος. Το Dragula είναι μια τεράστια βιβλιοθήκη και είναι ίσως το καλύτερο σενάριο ανοιχτού κώδικα χειριστείτε το drag & drop, με το ευρύτερο φάσμα προσαρμογής.