Το παρακάτω διαδραστικό παράδειγμα παρουσιάζει μια κατακόρυφη λίστα αντικειμένων η οποία επιτρέπει στον χρήστη να αναδιατάξει τη σειρά των στοιχείων μέσω της μεθόδου «Σύρε και Άσε» (Drag and Drop). Η εφαρμογή αποτελεί έναν χώρο πειραματισμού πάνω στον Άμεσο Χειρισμό (Direct Manipulation), όπου ο χρήστης επιδρά απευθείας στα συστατικά της διεπαφής αντί να χρησιμοποιεί πλήκτρα ελέγχου (όπως “Πάνω/Κάτω”).

Το παράδειγμα βασίζεται στο εγγενές HTML5 Drag and Drop API και επιτρέπει στον χρήστη να κάνει click & hold ένα στοιχείο της λίστας, να το μετακινήσει και να το αποθέσει σε νέα θέση. Ο κώδικας διαχειρίζεται μια σειρά από γεγονότα (events) όπως dragstart, dragover και drop για να μεταφέρει τα δεδομένα HTML και να ενημερώσει τη δομή του εγγράφου (DOM) σε πραγματικό χρόνο.

Η άσκηση αυτή αναδεικνύει βασικές έννοιες της διάδρασης ανθρώπου–υπολογιστή, εστιάζοντας στην οπτική ανατροφοδότηση (visual feedback). Συγκεκριμένα, το σύστημα υποδεικνύει πότε ένα στοιχείο είναι επιλεγμένο (αλλαγή διαφάνειας/opacity) και πού ακριβώς πρόκειται να τοποθετηθεί (εμφάνιση μπλε γραμμής στο dragover), μειώνοντας την αβεβαιότητα του χρήστη κατά τη διάρκεια της κίνησης.

Το interface ανταποκρίνεται άμεσα στις χειρονομίες, προσφέροντας μια φυσική αίσθηση ελέγχου. Με αυτόν τον τρόπο, ο χρήστης κατανοεί πώς οι σύγχρονες εφαρμογές (όπως Kanban boards ή λίστες προτεραιοτήτων) επιτρέπουν τη διαισθητική οργάνωση πληροφορίας χωρίς πολύπλοκα μενού ρυθμίσεων.

Στόχος του παραδείγματος: Να κατανοηθεί ο μηχανισμός των Native DOM Events και πώς η αλληλεπίδραση με το ποντίκι μεταφράζεται σε δυναμική αλλαγή της δομής της σελίδας. Το παράδειγμα προσομοιώνει λειτουργίες που συναντώνται συχνά σε εργαλεία παραγωγικότητας (π.χ. Trello, Jira), διαχείριση αρχείων ή ταξινόμηση λιστών αναπαραγωγής (playlists), όπου η σειρά των δεδομένων έχει σημασία.

Άσκηση: Τροποποιήστε το παράδειγμα προσθέτοντας: Αποθήκευση της νέας σειράς των αντικειμένων στο LocalStorage του browser, ώστε η σειρά να διατηρείται μετά από ανανέωση της σελίδας. Προσθήκη CSS animations ώστε τα στοιχεία να μετακινούνται ομαλά στη νέα τους θέση (smooth transition) αντί να εμφανίζονται απότομα. Δημιουργία μιας δεύτερης διπλανής λίστας και δυνατότητα μεταφοράς αντικειμένων από τη μία λίστα στην άλλη (διασύνδεση λιστών).

Στόχος είναι η επέκταση της λειτουργικότητας για τη δημιουργία ενός πλήρους συστήματος διαχείρισης εργασιών.