Για μεγάλο χρονικό διάστημα υπήρχαν λειτουργίες JavaScript που μας επιτρέπουν να δημιουργούμε διεπαφές μεταφοράς και απόθεσης, αλλά καμία από αυτές τις εφαρμογές δεν ήταν εγγενής στο πρόγραμμα περιήγησης.
Στην HTML5, έχουμε μια μητρική μέθοδο δημιουργίας διεπαφών μεταφοράς και απόθεσης (με λίγη βοήθεια από τη JavaScript).
Θα σας αφήσω να μάθετε πώς να το επιτύχετε αυτό ...
Θα ήθελα να το ξεπεράσω προτού προχωρήσουμε: αυτή τη στιγμή η μεταφορά και απόθεση HTML5 υποστηρίζεται από όλα τα μεγάλα προγράμματα περιήγησης επιφάνειας εργασίας (συμπεριλαμβανομένου του IE (ακόμη και του IE 5.5 έχει μερική υποστήριξη)), αλλά αυτή τη στιγμή δεν υποστηρίζεται από κανένα από τα δημοφιλή κινητά προγράμματα περιήγησης.
Σε κάθε στάδιο της λειτουργίας μεταφοράς και απόθεσης λειτουργεί ένα διαφορετικό συμβάν έτσι ώστε το πρόγραμμα περιήγησης να γνωρίζει τον κώδικα JavaScript που πρέπει να εκτελέσει. τα γεγονότα είναι:
Με όλους αυτούς τους ακροατές συμβάντων έχετε πολύ έλεγχο του τρόπου με τον οποίο λειτουργεί το περιβάλλον εργασίας σας και ακριβώς πώς εκτελείται σε διαφορετικές περιστάσεις.
Αυτό είναι όπου συμβαίνει όλα τα drag and drop μαγεία? αυτό το αντικείμενο διατηρεί τα δεδομένα που στάλθηκαν από τη λειτουργία σύρετε. Τα δεδομένα μπορούν να οριστούν και να ανακτηθούν με διάφορους τρόπους, οι σημαντικότεροι είναι:
Τώρα θα ξεκινήσουμε τη δημιουργία μας απλό παράδειγμα μεταφοράς και απόθεσης, μπορείτε να δείτε ότι έχουμε δύο μικρές και μεγαλύτερες μάζες, μπορούμε να σύρετε και να ρίξουμε τα μικρά μέσα στο μεγάλο και μπορούμε ακόμη και να τα μετακινήσουμε πίσω.
Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δημιουργήσουμε το HTML μας. Κάνουμε τα divs draggable με το draggable χαρακτηριστικό, όπως έτσι:
draggable="true">Όταν αυτό γίνει, πρέπει να ορίσουμε τη συνάρτηση javascript που θα τρέξει όταν αρχίζουμε να σύρει αυτό το στοιχείο:
function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,100,100);return true;}Σε αυτόν τον κώδικα δηλώνουμε αρχικά το είδος του αποτελέσματος που επιτρέπουμε στη λειτουργία και το ρυθμίζουμε ώστε να μετακινηθεί, στη δεύτερη γραμμή ορίζουμε τα δεδομένα για τη λειτουργία και στην περίπτωση αυτή ο τύπος είναι Κείμενο και η τιμή είναι το αναγνωριστικό του στοιχείου σέρνουμε. Μετά από αυτό, χρησιμοποιούμε τη μέθοδο setDragImage για να καθορίσουμε τι θα σύρει και στη συνέχεια, όπου ο δρομέας θα σύρει, και αφού οι κύβοι είναι 200 με 200px το έβαλα αυτό στο κέντρο. Τελικά επιστρέφουμε αλήθεια.
Προκειμένου ένα στοιχείο να δεχθεί μια πτώση, πρέπει να ακούσει 3 διαφορετικά γεγονότα: dragEnter, dragOver και επίσης το event drop so ας το προσθέσουμε στο html μας στο div με το ID του big:
Τώρα που προσθέσαμε τους ακροατές των εκδηλώσεων πρέπει να δημιουργήσουμε αυτές τις λειτουργίες, θα ξεκινήσουμε από τα πιο ευχάριστα γεγονότα:
function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}Στην πρώτη συνάρτηση ορίζουμε τι θέλουμε να συμβεί όταν το στοιχείο που σέρνουμε φτάνει στο στοιχείο που υποτίθεται ότι θα πέσει, στην περίπτωση αυτή αποτρέπουμε μόνο την προεπιλεγμένη συμπεριφορά του προγράμματος περιήγησης αλλά μπορείτε να κάνετε οποιουσδήποτε αριθμούς όπως αλλαγή της φόντο ή προσθέστε κάποιο κείμενο που υποδεικνύει ότι ο χρήστης μετακινείται στη σωστή περιοχή και χρησιμοποιώντας το συμβάν dragleave μπορείτε να επαναφέρετε τις αλλαγές που κάνατε. Στη συνέχεια, στη λειτουργία dragOver απλά εμποδίζουμε την προεπιλογή να επιτρέψει την πτώση.
Το επόμενο μέρος είναι όπου καθορίζουμε τη λειτουργία για το πότε θα αφήσουμε το στοιχείο στον επιθυμητό στόχο:
function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}Στο τελευταίο αυτό μέρος ορίσαμε πρώτα μια μεταβλητή που ονομάζεται δεδομένα στην οποία έχουμε όλα τα δεδομένα που είναι διαθέσιμα για τη μορφή κειμένου και στη συνέχεια προσθέτουμε αυτά τα δεδομένα (που θα είναι το στοιχείο που σέρνουμε) στο div όπου θέλουμε να πέσει το στοιχείο. Τελικά μερικές τελικές πινελιές όπως η διακοπή της διάδοσης και η επιστροφή ψευδών.
Ελεγχος το demo , μπορείτε να δείτε ότι διασφαλίσαμε επίσης ότι τα δύο τμήματα θα μπορούσαν να μεταφερθούν στην αρχική τους θέση. Ευτυχώς, η προσθήκη άλλου στόχου πτώσης μπορεί να είναι απλούστερη από ό, τι νομίζετε. επειδή οι λειτουργίες είναι ήδη στη θέση τους, το μόνο που πρέπει να κάνουμε είναι να προσθέσουμε τους ακροατές της εκδήλωσης, όπως και έτσι:
Και αυτό είναι το μόνο που χρειαζόμαστε για να επιτρέψουμε τη μεταφορά των διαιρέσεων στην αρχική θέση.
Υπάρχουν πολλές εφαρμογές μεταφοράς και απόθεσης που έχουν δημιουργηθεί χρησιμοποιώντας βιβλιοθήκες JavaScript και συχνά είναι πιο απλή η χρήση αυτών των βιβλιοθηκών. Αλλά ελπίζω ότι, σε αυτή την τεχνική HTML5 & JavaScript, θα δείτε τις μελλοντικές δυνατότητες της εγγενής λύσης.
Έχετε δημιουργήσει μια διασύνδεση μεταφοράς και απόθεσης; Πώς συγκρίνεται η μητρική HTML5 με τις καθαρές λύσεις JavaScript; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, πτώση εικόνας μέσω φωτογραφιών.