JavaScript είναι μία από τις πιο δημοφιλείς γλώσσες προγραμματισμού, ενισχυμένη με περισσότερα από 24 frameworks και περίπου 84 βιβλιοθήκες. Είναι η μόνη γλώσσα προγραμματισμού που υποστηρίζεται εγγενώς από όλα τα προγράμματα περιήγησης. Επιπλέον, η γλώσσα υποστηρίζει δυναμική πληκτρολόγηση και είναι εξαιρετική για rendering και animation. Μπορείτε να αξιοποιήσετε τη JavaScript για να προσθέσετε διαδραστική συμπεριφορά στο front-end, να ελέγξετε το back-end, να δημιουργήσετε εφαρμογές ιστού και κινητών, και πολλά άλλα. Η δυνατότητα προσθήκης εφέ σε οποιονδήποτε ιστότοπο και η προσαρμογή του καθιστούν τη γλώσσα αγαπημένη μεταξύ των προγραμματιστών παγκοσμίως.
Σε αυτόν τον οδηγό, θα σας καθοδηγήσουμε στα βήματα δημιουργίας στοιχείων drag and drop χρησιμοποιώντας καθαρή Vanilla JavaScript. Επιπλέον, θα προχωρήσουμε ένα βήμα παραπέρα και θα δημιουργήσουμε μια εφαρμογή «Morning Scheduler» χρησιμοποιώντας το HTML Drag and Drop API event handlers.
Προαπαιτούμενα
Για να παρακολουθήσετε αυτό το σεμινάριο, πρέπει να έχετε:
Βήμα 1: Δημιουργία νέου έργου
Ξεκινήστε δημιουργώντας ένα container με δύο θυγατρικά στοιχεία. Θα χρησιμοποιήσουμε το πρώτο θυγατρικό στοιχείο για σύρσιμο και το δεύτερο θυγατρικό στοιχείο για την αποθήκευση των στοιχείων που σύρθηκαν.
|
Σημείωση: Σε αυτό το σεμινάριο, θα αντιμετωπίσουμε τα containers ως αποθηκευτικό χώρο για να διατηρούμε όλα τα στοιχεία που σύρονται. Με απλά λόγια, όλα τα στοιχεία που σύρονται από το πρώτο θυγατρικό στοιχείο θα εναποτίθενται στο δεύτερο. |
|
1 |
$ mkdir drag-and-drop-demo |
Next, use the cd command to change the directory to the drag-and-drop-demo folder:
|
1 |
$ cd drag-and-drop-demo |
Βήμα 2: Αρχική ρύθμιση
Σε αυτό το σεμινάριο, θα δημιουργήσουμε αρχεία HTML, CSS και JavaScript και θα τα συνδέσουμε. Αρχικά, ονομάστε τα αρχεία ως index.html, styles.css, και scripts.js αντίστοιχα.
Στη συνέχεια, προσθέστε τον τίτλο ως «My Morning Planner» στο αρχείο index.html file:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Morning Planner</title> </head> <body> </body> </html> |
Στη συνέχεια, συνδέστε το CSS και προσθέστε τη JavaScript στο HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>My Morning Planner</title> </head> <body> </body> </html> |
Next, add the following lines of code in the <body> tags:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>Ο Πρωινός μου Προγραμματιστής</title> </head> <body> <div class="container"> <h1><center>Ο ΠΡΩΙΝΟΣ ΜΟΥ ΠΡΟΓΡΑΜΜΑΤΙΣΤΗΣ</center></h1> <h2 class="draggable" draggable="true">Πήγαινε στο Γυμναστήριο</h2> <h2 class="draggable" draggable="true">Διάβασε για 30 λεπτά</h2> <h2 class="draggable" draggable="true">Προετοίμασε Βρώμη</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">Κάνε ένα Κρύο Ντους</h2> <h2 class="draggable" draggable="true">Ξεκίνα τη Μέρα μου</h2> </div> </body> </html> |
Save and close the index.html file. After that, try opening the index.html file in your browser and you will see a page opening up:
Next, let’s style our index.html using CSS and make it look presentable.
Step 3: Styling using CSS
Next, add styles on all the elements we’ve included in our index.html file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { margin: 0; } .container { background-color: #DEB887; padding: 1rem; margin-top: 1rem; } .draggable { padding: 1rem; background-color: #FAF0E6; border: 1px solid #708090; cursor: move; } |
Try opening the index.html file in your browser and see the output:
Though we have completed structuring and added styles, the elements are still static. That means, we cannot move or scroll elements until we add dynamic features to them. In the next step, we’ll welcome JavaScript and dynamic behaviors.
Step 4: Introducing JavaScript
Σε αυτό το βήμα, θα εισαγάγουμε τη JavaScript και θα κάνουμε όλα τα στοιχεία μεταφοράς λειτουργικά. Στο αρχείο JS, ορίστε τα στοιχεία που θα χρειαστούμε. Ας ορίσουμε draggable και containers για τη μεταφορά και απόθεση στοιχείων αντίστοιχα.
Προσθέστε τις δύο γραμμές κώδικα στο scripts.js αρχείο:
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
Στη συνέχεια, ρυθμίστε όλους τους event listeners. Ξεκινήστε προσθέτοντας το στοιχείο “dragstart” ως τον πρώτο event listener για να add τη λίστα κλάσεων. Παρομοίως, προσθέστε το στοιχείο “dragend” ως τον δεύτερο event listener για να remove τη λίστα κλάσεων.
Επισυνάψτε τους ακόλουθους EventListeners στο scripts.js αρχείο σας:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging') }) draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging') }) }) |
Στη συνέχεια, προσθέστε τον “dragover” EventListener για την αιώρηση και τη μετακίνηση των στοιχείων μας. Ορίστε το τρέχον στοιχείο draggable χρησιμοποιώντας το querySelector και στη συνέχεια προσαρτήστε το μεταφερόμενο στοιχείο στον τρέχοντα περιέκτη:
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
Από προεπιλογή, η απόθεση μέσα σε ένα στοιχείο είναι απενεργοποιημένη. Χρησιμοποιήστε το e.preventDefault για να την ενεργοποιήσετε:
|
1 2 3 4 5 6 7 8 |
// … containers.forEach(container => { container.addEventListener('dragover', e => { e.preventDefault() const draggable = document.querySelector('.dragging') container.appendChild(draggable) }) }) |
Στη συνέχεια, δημιουργήστε ένα στοιχείο για να προσδιορίσετε τη θέση του ποντικιού. Ξεκινήστε δημιουργώντας μια συνάρτηση getDragAfterElement η οποία θα δέχεται δύο παραμέτρους. Η πρώτη θα είναι ένας container και η δεύτερη παράμετρος y θα αναλάβει την κατακόρυφη θέση του ποντικιού. Τώρα, χρησιμοποιήστε τη συνάρτηση querySelectorAll για να λάβετε τα μεταφερόμενα στοιχεία μας. Ορίστε μια μεταβλητή draggableElements για όλα τα μεταφερόμενα στοιχεία μέσα στον περιέκτη:
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
Στη συνέχεια, καλέστε μια συνάρτηση reduce η οποία θα επαναλαμβάνει τη λίστα των μεταφερόμενων στοιχείων και επίσης θα προσδιορίζει το μοναδικό στοιχείο μετά τον κέρσορα του ποντικιού. Στη συνέχεια, return τη συνάρτηση reduce προσθέτοντας το πρώτο στοιχείο ως closest και το δεύτερο ως child. Επίσης, εξισώστε το offset και προσθέστε συνθήκες.
Προσθέστε τις ακόλουθες γραμμές κώδικα στο scripts.js αρχείο:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// … return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect() const offset = y - box.top - box.height / 2 if (offset < 0 && offset > closest.offset){ return { offset: offset, element: child } } else { return closest } }, { offset: Number.NEGATIVE_INFINITY}).element } |
Include this in the scripts.js file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// … containers.forEach(container => { container.addEventListener('dragover', e =>{ e.preventDefault() const afterElement = getDragAfterElement(container, e.clientY) const draggable = document.querySelector('.dragging') if (afterElement == null) { container.appendChild(draggable) } else { container.insertBefore(draggable, afterElement) } }) }) |
Τώρα έχουμε κάνει την απαραίτητη προετοιμασία. Ανοίξτε το πρόγραμμα περιήγησής σας και εκτελέστε το index.html στο πρόγραμμα περιήγησής σας. Θα δείτε τη σελίδα «My Morning Scheduler» με επιλογές για μεταφορά και απόθεση. Η λευκή γραμμή στη μέση λειτουργεί ως γέφυρα για τη διάκριση μεταξύ των εργασιών που έχουν ήδη ολοκληρωθεί και εκείνων που δεν έχουν γίνει ακόμη:
Συμπέρασμα
Η μεταφορά και απόθεση (Drag and Drop) είναι μια εξαιρετική επιλογή για χρήση σε σύγχρονους ιστότοπους. Σε αυτόν τον οδηγό, χρησιμοποιήσαμε μερικούς χειριστές συμβάντων για να κάνουμε το σεμινάριο εύκολο για αρχάριους. Υπάρχουν συνολικά οκτώ χειριστές συμβάντων και σας ενθαρρύνουμε να τους χρησιμοποιήσετε καθώς προχωράτε. Μόλις νιώσετε άνετα με τη χρήση των συναρτήσεων και του κώδικα που χρησιμοποιούνται σε αυτό το σεμινάριο, μπορείτε να εμβαθύνετε σε θέματα της JavaScript όπως το jQuery και να ξεκινήσετε την εξερεύνηση. Μπορείτε επίσης να δοκιμάσετε να δημιουργήσετε μια εφαρμογή To-Do, έναν εβδομαδιαίο ανιχνευτή προόδου χρησιμοποιώντας δυνατότητες ημερομηνίας και ώρας της JavaScript, και άλλες εφαρμογές χρησιμοποιώντας τις έννοιες που μόλις μάθατε.
Για να μάθετε περισσότερα σχετικά με τη JavaScript και θέματα ανάπτυξης ιστού, δείτε αυτούς τους πόρους από το ιστολόγιό μας:
- Εργαλεία JavaScript: localStorage και sessionStorage
- Εργασία με τη JavaScript: Τι είναι τα Αντικείμενα
- Οδηγός εκμάθησης για την εργασία με JSON στη JavaScript
- Εργασία με τη JavaScript: Πώς λειτουργούν οι κλάσεις
Καλή υπολογιστική!
Σχόλια
Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.