Γενικά θέματα και θεωρία τεχνολογίας Drag and Drop. Τεχνολογία μεταφοράς και απόθεσης στο Android Δείτε τι είναι το "Drag-and-drop" σε άλλα λεξικά
182
Σε αυτό το παράδειγμα, επιλέγουμε ένα στοιχείο div και το κάνουμε κινητό καλώντας τη μέθοδο dragable() σε αυτό. Όπως φαίνεται στην παρακάτω εικόνα, στο ανοιχτό έγγραφο το στοιχείο παίρνει τη συνηθισμένη του θέση, αλλά μετά από αυτό μπορεί να μετακινηθεί χρησιμοποιώντας το δείκτη του ποντικιού σε οποιοδήποτε σημείο στο παράθυρο του προγράμματος περιήγησης:
Η δυνατότητα μεταφοράς και απόθεσης στοιχείων είναι χρήσιμη από μόνη της, αλλά είναι ακόμη πιο χρήσιμη όταν χρησιμοποιείται σε συνδυασμό με την αλληλεπίδραση Droppable, η οποία περιγράφεται στη συνέχεια.
Η αλληλεπίδραση με δυνατότητα μεταφοράς επιτυγχάνεται αποκλειστικά με τη χρήση συγκεκριμένων στυλ σήμανσης HTML και CSS. Αυτό σημαίνει ότι αυτή η λειτουργία θα λειτουργεί σε σχεδόν οποιοδήποτε πρόγραμμα περιήγησης, αλλά τα στοιχεία που είναι εφοδιασμένα με αυτήν δεν θα μπορούν να λειτουργήσουν με παρόμοια εγγενή εργαλεία μεταφοράς και απόθεσης λειτουργικά συστήματα.
Οι λειτουργίες μεταφοράς και απόθεσης που ορίζονται από την προδιαγραφή HTML5 συνήθως υλοποιούνται χρησιμοποιώντας μηχανισμούς εγγενούς λειτουργικού συστήματος. Εάν χρησιμοποιείτε τον μηχανισμό μεταφοράς και απόθεσης της διεπαφής χρήστη jQuery, τότε είναι προτιμότερο να απενεργοποιήσετε τις ισοδύναμες δυνατότητες HTML5 για να αποφύγετε τις διενέξεις. Για να το κάνετε αυτό, ορίστε το χαρακτηριστικό dragable του στοιχείου σώματος του εγγράφου σε false.
Ρύθμιση της Draggable InteractionΥπάρχουν πολλές επιλογές προσαρμογής για αλληλεπιδράσεις με δυνατότητα μεταφοράς. Οι πιο σημαντικές ιδιότητες, οι οποίες συζητούνται στις ακόλουθες ενότητες, φαίνονται στον παρακάτω πίνακα:
| άξονας | Περιορίζει την ικανότητα κίνησης προς ορισμένες κατευθύνσεις. Η προεπιλεγμένη τιμή είναι false, που σημαίνει ότι δεν υπάρχει περιορισμός, αλλά μπορείτε επίσης να καθορίσετε μια τιμή "x" (μετακίνηση μόνο κατά τον άξονα X) ή "y" (μετακίνηση μόνο κατά μήκος του άξονα Y) |
| περιορισμός | Περιορίζει τη θέση του στοιχείου που μετακινείται σε μια συγκεκριμένη περιοχή της οθόνης. Οι τύποι των υποστηριζόμενων τιμών περιγράφονται στον παρακάτω πίνακα, χρησιμοποιώντας το αντίστοιχο παράδειγμα. Η προεπιλεγμένη τιμή είναι false, που σημαίνει ότι δεν υπάρχουν περιορισμοί |
| καθυστέρηση | Καθορίζει πόσο χρόνο πρέπει να σύρεται ένα στοιχείο προτού μετακινηθεί. Η προεπιλεγμένη τιμή είναι 0, που δεν σημαίνει καθυστέρηση |
| απόσταση | Καθορίζει την απόσταση που ο χρήστης πρέπει να σύρει ένα στοιχείο από την αρχική του θέση προτού πραγματικά μετακινηθεί. Η προεπιλεγμένη τιμή είναι 1 pixel |
| πλέγμα | Αναγκάζει το κούμπωμα του μετακινούμενου στοιχείου στα κελιά του πλέγματος. Η προεπιλεγμένη τιμή είναι false, που σημαίνει ότι δεν υπάρχει δέσμευση |
Υπάρχουν διάφοροι τρόποι με τους οποίους μπορείτε να περιορίσετε την κίνηση ενός στοιχείου σε συγκεκριμένες κατευθύνσεις. Η πρώτη είναι να χρησιμοποιήσετε την επιλογή άξονα, η οποία σας επιτρέπει να περιορίσετε την κατεύθυνση της κίνησης στον άξονα X ή Y. Ένα παράδειγμα αυτού φαίνεται παρακάτω:
... div.dragElement (μέγεθος γραμματοσειράς: μεγάλο; περίγραμμα: λεπτό συμπαγές μαύρο; padding:16px; πλάτος: 8em; στοίχιση κειμένου: κέντρο; χρώμα φόντου: ανοιχτό γκρι; περιθώριο: 4px ) $(function() ( $ (".dragElement").draggable(( axis: "x")).filter("#dragV").draggable("option", "axis", "y"); )); Σύρετε κάθετα Σύρετε οριζόντια Παράδειγμα εκτέλεσης
Σε αυτό το παράδειγμα, ορίζουμε δύο στοιχεία div, τα επιλέγουμε χρησιμοποιώντας jQuery και καλούμε τη μέθοδο dragable(). Ως όρισμα αυτής της μεθόδου, περνάμε ένα αντικείμενο που αρχικά περιορίζει την κίνηση και των δύο στοιχείων div προς την κατεύθυνση κατά μήκος του άξονα X. Στη συνέχεια, χρησιμοποιώντας τη μέθοδο jQuery filter(), μπορούμε να επιλέξουμε το στοιχείο dragV χωρίς το jQuery να αναζητήσει το ολόκληρο το έγγραφο ξανά και ρυθμίστε το σε διαφορετική επιτρεπόμενη κατεύθυνση κίνησης - κατά μήκος του άξονα Υ. Έτσι, παίρνουμε ένα έγγραφο στο οποίο ένα στοιχείο div μπορεί να συρθεί μόνο στην κατακόρυφη κατεύθυνση και το άλλο - μόνο στην οριζόντια κατεύθυνση. Το αποτέλεσμα φαίνεται στο σχήμα:
Μπορείτε επίσης να περιορίσετε την περιοχή της οθόνης όπου μπορείτε να σύρετε ένα αντικείμενο. Για να το κάνετε αυτό, χρησιμοποιήστε την επιλογή περιορισμού. Οι μορφές τιμών που μπορούν να καθοριστούν σε αυτήν την επιλογή περιγράφονται στον παρακάτω πίνακα:
Ένα παράδειγμα χρήσης της επιλογής περιορισμού δίνεται παρακάτω:
... div.dragElement (μέγεθος γραμματοσειράς: μεγάλο; περίγραμμα: λεπτό συμπαγές μαύρο; padding: 16px; πλάτος: 8em; στοίχιση κειμένου: κέντρο; χρώμα φόντου: ανοιχτό γκρι; περιθώριο: 4 px ) #container ( περίγραμμα: μεσαίο διπλό μαύρο; πλάτος: 700 εικονοστοιχεία; ύψος: 450 εικονοστοιχεία) $(function() ( $(".dragElement").draggable(( containment: "parent" )).filter("#dragH").draggable("option", " άξονας", "x"); )); Σύρετε οριζόντια Σύρετε μέσα στο γονικό Παράδειγμα εκτέλεσης
Σε αυτό το παράδειγμα, και τα δύο στοιχεία είναι περιορισμένα στην ικανότητά τους να μετακινούνται, έτσι ώστε να μπορούν να συρθούν μόνο μέσα στο γονικό τους στοιχείο, το οποίο είναι ένα div σταθερού μεγέθους. Ένα από τα divs που επιπλέουν έχει τον πρόσθετο περιορισμό να επιπλέει χρησιμοποιώντας την επιλογή άξονα, καθώς μπορεί να κινηθεί μόνο οριζόντια μέσα στο γονικό του. Το αποτέλεσμα φαίνεται στο σχήμα:
Η επιλογή πλέγματος σάς επιτρέπει να ορίσετε τη σύνδεση του μετακινούμενου στοιχείου σε κελιά πλέγματος. Αυτή η επιλογή παίρνει ως τιμή έναν πίνακα δύο στοιχείων που καθορίζουν το πλάτος και το ύψος των κελιών πλέγματος σε pixel. Ένα παράδειγμα χρήσης της επιλογής πλέγματος δίνεται παρακάτω:
... #draggable (μέγεθος γραμματοσειράς: x-large; περίγραμμα: λεπτό συμπαγές μαύρο; πλάτος: 5em; στοίχιση κειμένου: κέντρο; padding:10px) $(function() ( $("#draggable").draggable( ( πλέγμα: )); )); Drag me Run παράδειγμα
Αυτό το παράδειγμα καθορίζει ένα πλέγμα με κελιά πλάτους 100 εικονοστοιχείων και ύψος 50 εικονοστοιχείων. Όταν σύρετε ένα στοιχείο, αυτό "πηδά" από το ένα (αόρατο) κελί στο άλλο. Το εφέ σπασίματος είναι ένα εξαιρετικό παράδειγμα του πώς μπορεί να χρησιμοποιηθεί η λειτουργικότητα αλληλεπίδρασης, αλλά είναι δύσκολο να μεταδοθεί χρησιμοποιώντας στιγμιότυπα οθόνης.
Μπορείτε να δημιουργήσετε ένα εφέ κουμπώματος μόνο για μία κατεύθυνση ορίζοντας τον άξονα ελεύθερης κίνησης σε 1. Για παράδειγμα, εάν ορίσετε την επιλογή πλέγματος σε , το στοιχείο θα κουμπώσει σε κελιά πλέγματος πλάτους 100 εικονοστοιχείων όταν μετακινηθεί οριζόντια, αλλά θα κινείται ελεύθερα κατακόρυφα.
Καθυστέρηση μετακίνησηςΥπάρχουν δύο επιλογές που σας επιτρέπουν να καθυστερήσετε τη μεταφορά ενός κινούμενου στοιχείου. Η επιλογή καθυστέρησης σάς επιτρέπει να καθορίσετε το χρόνο, σε χιλιοστά του δευτερολέπτου, που ο χρήστης πρέπει να σύρει τον δείκτη του ποντικιού πριν το στοιχείο μετακινηθεί πραγματικά. Ένα άλλο είδος καθυστέρησης παρέχεται από την επιλογή απόστασης, η οποία καθορίζει την απόσταση σε pixel που ο χρήστης πρέπει να σύρει τον δείκτη του ποντικιού πριν ακολουθηθεί από ένα στοιχείο.
Ένα παράδειγμα χρήσης και των δύο ρυθμίσεων δίνεται παρακάτω:
... #time, #distance (μέγεθος γραμματοσειράς: μεγάλο, περίγραμμα: λεπτό, συμπαγές μαύρο, επένδυση: 10 εικονοστοιχεία, πλάτος: 120 εικονοστοιχεία, στοίχιση κειμένου: κέντρο, χρώμα φόντου: ανοιχτό γκρι, περιθώριο: 4 εικονοστοιχεία; ) $(function( ) ( $("#time").draggable(( καθυστέρηση: 1000 )) $("#distance").draggable(( απόσταση: 150 )) )); Μπλοκ με χρονική καθυστέρηση Μπλοκ με ελάχιστη απόσταση Παράδειγμα εκτέλεσης
Σε αυτό το παράδειγμα υπάρχουν δύο κινούμενα στοιχεία, το ένα εκ των οποίων καθυστερεί χρησιμοποιώντας την επιλογή καθυστέρησης και το άλλο καθυστερεί χρησιμοποιώντας την επιλογή απόστασης.
Σε περίπτωση καθυστέρησης, που καθορίζεται από την επιλογή καθυστέρησης, ο χρήστης πρέπει να σύρει για ένα συγκεκριμένο χρονικό διάστημα πριν μετακινήσει πραγματικά το στοιχείο. Σε αυτό το παράδειγμα, η διάρκεια αυτής της περιόδου είναι 1000 ms. Δεν είναι απαραίτητο να μετακινήσετε το ποντίκι αυτή τη στιγμή, αλλά καθ' όλη τη διάρκεια της περιόδου καθυστέρησης το κουμπί του ποντικιού πρέπει να παραμείνει πατημένο, μετά την οποία το στοιχείο μπορεί να μετακινηθεί μετακινώντας το ποντίκι. Αφού παρέλθει ο χρόνος καθυστέρησης, το στοιχείο που μετακινείται θα κουμπώσει στη θέση του δείκτη του ποντικιού, σύμφωνα με τους περιορισμούς που επιβάλλονται από τις επιλογές πλέγματος, περιοχής και άξονα που συζητήθηκαν προηγουμένως.
Η επιλογή απόστασης έχει παρόμοιο αποτέλεσμα, αλλά σε αυτήν την περίπτωση ο χρήστης πρέπει να σύρει τον δείκτη του ποντικιού τουλάχιστον έναν καθορισμένο αριθμό pixel προς οποιαδήποτε κατεύθυνση από την αρχική θέση του στοιχείου. Στη συνέχεια, το στοιχείο που μετακινείται θα μεταβεί στην τρέχουσα θέση του δείκτη.
Εάν εφαρμόσετε και τις δύο ρυθμίσεις στο ίδιο στοιχείο, το στοιχείο που μετακινήθηκε δεν θα μετακινηθεί έως ότου πληρούνται και τα δύο κριτήρια καθυστέρησης, π.χ. μέχρι να διαρκέσει μια προσπάθεια σύρματος ενός στοιχείου για ένα καθορισμένο χρονικό διάστημα και έως ότου ο δείκτης του ποντικιού μετακινήσει έναν καθορισμένο αριθμό pixel.
Χρήση μεθόδων αλληλεπίδρασης με δυνατότητα μεταφοράςΌλες οι μέθοδοι που ορίζονται για αλληλεπίδραση με δυνατότητα μεταφοράς αποτελούν μέρος του συνόλου των βασικών μεθόδων που έχετε ήδη δει κατά την εξέταση γραφικών στοιχείων. Δεν υπάρχουν μέθοδοι ειδικά για την αλληλεπίδραση με δυνατότητα μεταφοράς, επομένως δεν θα τις καλύψουμε λεπτομερώς. Ο κατάλογος των διαθέσιμων μεθόδων δίνεται στον παρακάτω πίνακα:
Χρήση συμβάντων αλληλεπίδρασης με δυνατότητα μεταφοράςΤο Interaction Draggable υποστηρίζει ένα απλό σύνολο συμβάντων που σας ειδοποιούν όταν σύρεται ένα στοιχείο. Αυτά τα γεγονότα περιγράφονται στον παρακάτω πίνακα:
Όπως συμβαίνει με τα συμβάντα γραφικών στοιχείων, μπορούν επίσης να ανταποκριθούν σε αυτά τα συμβάντα. Ένα παράδειγμα χειρισμού των γεγονότων έναρξης και λήξης δίνεται παρακάτω:
... #draggable (μέγεθος γραμματοσειράς: x-large; περίγραμμα: λεπτό συμπαγές μαύρο; πλάτος: 190px; στοίχιση κειμένου: κέντρο; padding:10px) $(function() ( $("#draggable").draggable( ( start: function() ( $("#draggable").text("Drag me..."), stop: function() ($("#draggable").text("Drag me") ) )) ;)); Drag me Run παράδειγμα
Αυτό το παράδειγμα χρησιμοποιεί τα συμβάντα έναρξης και λήξης για να αλλάξει το περιεχόμενο κειμένου ενός στοιχείου καθώς σύρεται. Αυτό το πλεονέκτημα οφείλεται στο γεγονός ότι η αλληλεπίδραση του Draggable υλοποιείται εξ ολοκλήρου χρησιμοποιώντας HTML και CSS: μπορείτε να χρησιμοποιήσετε το jQuery για να αλλάξετε την κατάσταση ενός στοιχείου με δυνατότητα μεταφοράς ακόμα και όταν κινείται στην οθόνη.
Χρήση Droppable InteractionΗ μεταφορά ενός στοιχείου από μόνη της μπορεί να είναι επαρκής σε ορισμένες περιπτώσεις, αλλά είναι πιο χρήσιμη όταν χρησιμοποιείται σε συνδυασμό με την αλληλεπίδραση Droppable.
Στοιχεία στα οποία έχει εφαρμοστεί η αλληλεπίδραση Droppable (στοιχεία λήψης) αποκτούν τη δυνατότητα αποδοχής κινητών στοιχείων που δημιουργούνται χρησιμοποιώντας την αλληλεπίδραση Draggable.
Τα στοιχεία λήψης δημιουργούνται χρησιμοποιώντας τη μέθοδο droppable(), αλλά για να αποκτήσετε χρήσιμη λειτουργικότητα θα χρειαστεί να δημιουργήσετε προγράμματα χειρισμού συμβάντων μεταξύ αυτών που έχουν καθοριστεί για αυτόν τον τύπο αλληλεπίδρασης. Τα διαθέσιμα συμβάντα εμφανίζονται στον παρακάτω πίνακα:
| δημιουργώ | Εμφανίζεται όταν μια αλληλεπίδραση Droppable εφαρμόζεται σε ένα στοιχείο |
| δραστηριοποιώ | Εμφανίζεται όταν ο χρήστης αρχίζει να σύρει το στοιχείο που μετακινείται |
| απενεργοποιήστε | Εμφανίζεται όταν ο χρήστης σταματά να σέρνει το στοιχείο που μετακινείται |
| πάνω από | Εμφανίζεται όταν ο χρήστης σύρει ένα αιωρούμενο στοιχείο πάνω από ένα στοιχείο λήψης (με την προϋπόθεση ότι το κουμπί του ποντικιού δεν έχει ακόμη απελευθερωθεί) |
| έξω | Εμφανίζεται όταν ο χρήστης σύρει το στοιχείο που μετακινείται έξω από το στοιχείο λήψης |
| πτώση | Εμφανίζεται όταν ο χρήστης αφήνει το στοιχείο που μετακινείται στο στοιχείο λήψης |
Ένα παράδειγμα δημιουργίας ενός απλού στοιχείου λήψης για το οποίο έχει οριστεί ένας χειριστής συμβάντων μεμονωμένης πτώσης δίνεται παρακάτω:
... #draggable, #droppable (μέγεθος γραμματοσειράς: μεγάλο; περίγραμμα: λεπτό συμπαγές μαύρο; padding: 10px; πλάτος: 100px; text-align: center; background-color: lightgray; margin: 4px;) #droppable (padding : 20 px; θέση: απόλυτη; δεξιά: 5 εικονοστοιχεία;) $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $(" #draggable").text("Αριστερά") ) )); )); Αφήστε με εδώ Drag me Run παράδειγμα
Αυτό το παράδειγμα προσθέτει ένα στοιχείο div στο έγγραφο του οποίου το περιεχόμενο κειμένου αντιπροσωπεύεται από τη συμβολοσειρά "Αποχώρηση από εδώ". Επιλέγουμε αυτό το στοιχείο χρησιμοποιώντας το jQuery και καλούμε τη μέθοδο droppable(), μεταβιβάζοντάς της ένα αντικείμενο ρυθμίσεων που ορίζει έναν χειριστή για το συμβάν drop. Η απάντηση σε αυτό το συμβάν είναι η αλλαγή του κειμένου του στοιχείου που μετακινείται χρησιμοποιώντας τη μέθοδο text().
Η αλληλεπίδραση μεταφοράς και απόθεσης που δημιουργήθηκε σε αυτό το παράδειγμα είναι απλή, αλλά παρέχει ένα χρήσιμο πλαίσιο για να εξηγήσουμε πώς συνεργάζονται οι αλληλεπιδράσεις με δυνατότητα μεταφοράς και απόθεσης. Τα διάφορα στάδια της διαδικασίας έλξης στοιχείων απεικονίζονται στο σχήμα:
Όλα φαίνονται πολύ απλά. Σύρουμε το στοιχείο που μετακινείται μέχρι να βρεθεί πάνω από το στοιχείο λήψης και το αφήνουμε. Το στοιχείο που απορρίπτεται παραμένει στο σημείο που αφέθηκε και το περιεχόμενο κειμένου του αλλάζει ως απόκριση στο συμβάν πτώσης. Οι ακόλουθες ενότητες δείχνουν πώς μπορείτε να χρησιμοποιήσετε άλλα συμβάντα αλληλεπίδρασης του Droppable για να βελτιώσετε την εμπειρία του χρήστη.
Φωτισμός αντικειμένου λήψης στόχουΧρησιμοποιώντας τα συμβάντα ενεργοποίησης και απενεργοποίησης, μπορείτε να επισημάνετε το αντικείμενο λήψης στόχου όταν ο χρήστης ξεκινήσει τη διαδικασία μεταφοράς ενός στοιχείου. Σε πολλές περιπτώσεις, αυτή η ιδέα είναι πολύ γόνιμη επειδή παρέχει στο χρήστη αξιόπιστη καθοδήγηση ως προς τα στοιχεία που αποτελούν μέρος του μοντέλου μεταφοράς και απόθεσης. Αντίστοιχο παράδειγμα δίνεται παρακάτω:
... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Left ") ), ενεργοποίηση: function() ( $("#droppable").css(( περίγραμμα: "μεσαίο διπλό πράσινο", backgroundColor: "lightGreen" )); ), απενεργοποιήστε: function() ( $("#droppable ").css("border", "").css("background-color", ""); ) )); )); ...Παράδειγμα εκτέλεσης
Μόλις ο χρήστης αρχίσει να σύρει ένα στοιχείο, το συμβάν ενεργοποίησης που σχετίζεται με το στοιχείο λήψης ενεργοποιείται και η συνάρτηση χειριστή χρησιμοποιεί τη μέθοδο css() για να αλλάξει τις ιδιότητες CSS περιγράμματος και φόντου αυτού του στοιχείου. Ως αποτέλεσμα, το στοιχείο λήψης στόχου επισημαίνεται, υποδεικνύοντας στον χρήστη ότι υπάρχει σύνδεση μεταξύ αυτού και του στοιχείου που μετακινείται.
Το συμβάν απενεργοποίησης χρησιμοποιείται για την αφαίρεση των τιμών ιδιοτήτων CSS από το στοιχείο λήψης και την επιστροφή του στο την αρχική κατάσταση, μόλις ο χρήστης αφήσει το κουμπί του ποντικιού. (Αυτό το συμβάν συμβαίνει κάθε φορά που η μεταφορά ενός στοιχείου σταματά, ανεξάρτητα από το αν το στοιχείο που σύρεται παραμένει στο στοιχείο λήψης ή όχι.) Αυτή η διαδικασία φαίνεται στο σχήμα:
Η τεχνολογία μεταφοράς και απόθεσης μπορεί να βελτιωθεί προσθέτοντας επανειλημμένα χειρισμό συμβάντων. Το συμβάν over συμβαίνει όταν το 50% του στοιχείου που μετακινείται βρίσκεται πάνω από οποιοδήποτε μέρος του στοιχείου λήψης. Το συμβάν εξόδου συμβαίνει όταν τα προηγούμενα επικαλυπτόμενα στοιχεία δεν επικαλύπτονται πλέον. Ένα παράδειγμα της απάντησης σε αυτά τα γεγονότα δίνεται παρακάτω:
$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Left") ) , ενεργοποίηση: function() ( $("#droppable").css(( περίγραμμα: "μεσαίο διπλό πράσινο", backgroundColor: "lightGreen" )); ), απενεργοποιήστε: function() ($("#droppable"). css("border", "").css("background-color", ""); ), over: function() ($("#droppable").css(( border: "medium double red", backgroundColor : "red" )); ), out: function() ($("#droppable").css("border", "").css("background-color", ""); ) )); ) ) Παράδειγμα εκτέλεσης
Οι ίδιες συναρτήσεις χειριστή χρησιμοποιούνται εδώ όπως στο προηγούμενο παράδειγμα, αλλά σε αυτήν την περίπτωση σχετίζονται με τα συμβάντα πέρα και έξω. Όταν το στοιχείο λήψης επικαλύπτει τουλάχιστον το 50% του στοιχείου που μετακινείται, περικλείεται σε ένα πλαίσιο και το χρώμα του φόντου του αλλάζει, όπως φαίνεται στο σχήμα:
Αυτό το όριο του 50% ονομάζεται κατώφλι επικάλυψης (ανοχή), η τιμή του οποίου μπορεί να οριστεί κατά τη δημιουργία του στοιχείου λήψης, όπως θα φανεί αργότερα.
Ρύθμιση της αλληλεπίδρασης DroppableΗ αλληλεπίδραση Droppable έχει μια σειρά από ιδιότητες που μπορείτε να αλλάξετε για να προσαρμόσετε τη συμπεριφορά της. Αυτές οι ιδιότητες παρατίθενται στον παρακάτω πίνακα:
| άτομα με ειδικές ανάγκες | Εάν αυτή η επιλογή είναι αληθής, τότε η λειτουργία αλληλεπίδρασης Droppable είναι αρχικά απενεργοποιημένη. Η προεπιλεγμένη τιμή είναι ψευδής |
| αποδέχομαι | Περιορίζει το σύνολο των κινητών στοιχείων στα οποία θα ανταποκριθεί το στοιχείο λήψης. Η προεπιλεγμένη τιμή είναι *, η οποία ταιριάζει με οποιοδήποτε στοιχείο |
| activeClass | Καθορίζει μια κλάση που θα εκχωρηθεί ως απόκριση στο συμβάν ενεργοποίησης και θα αφαιρεθεί ως απόκριση στο συμβάν απενεργοποίησης |
| hoverClass | Καθορίζει μια κλάση που θα εκχωρηθεί ως απόκριση σε ένα συμβάν over και θα αφαιρεθεί ως απόκριση σε ένα συμβάν εξόδου |
| ανοχή | Καθορίζει τον ελάχιστο βαθμό επικάλυψης στον οποίο εμφανίζεται ένα συμβάν υπέρβασης |
Μπορείτε να περιορίσετε το σύνολο των droppable στοιχείων που θα γίνουν δεκτά από ένα στοιχείο με λειτουργικότητα διαλειτουργικότητας Droppable χρησιμοποιώντας την επιλογή αποδοχή. Η τιμή της επιλογής αποδοχής πρέπει να οριστεί σε έναν επιλογέα. Ως αποτέλεσμα, συμβάντα αλληλεπίδρασης Droppable θα προκύψουν μόνο εάν το στοιχείο που μετακινείται ταιριάζει με τον καθορισμένο επιλογέα. Αντίστοιχο παράδειγμα δίνεται παρακάτω:
... .draggable, #droppable (μέγεθος γραμματοσειράς: μεγάλο; περίγραμμα: λεπτό συμπαγές μαύρο; padding: 10px; πλάτος: 100px; text-align: center; background-color: lightgray; margin: 4px;) #droppable (padding : 20 px; θέση: απόλυτη; δεξιά: 5 εικονοστοιχεία;) $(function() ( $(".draggable").draggable(); $("#droppable").droppable(( drop: function(event, ui) ( ui.draggable.text("Αριστερά") ), activate: function() ($("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function () ( $("#droppable").css("border", "").css("background-color", ""); ), αποδοχή: "#drag1" )); )); Αφήστε εδώ Στοιχείο 1 Στοιχείο 2 Παράδειγμα εκτέλεσης
Σε αυτό το παράδειγμα υπάρχουν δύο στοιχεία με δυνατότητα μεταφοράς με αναγνωριστικά drag1 και drag2. Κατά τη δημιουργία ενός στοιχείου λήψης, χρησιμοποιούμε την επιλογή αποδοχή, με την οποία υποδεικνύουμε ότι μόνο το στοιχείο drag1 θα είναι αποδεκτό στοιχείο προς μετακίνηση.
Όταν σύρετε το στοιχείο drag1, θα δείτε το ίδιο εφέ όπως στα προηγούμενα παραδείγματα. Σε κατάλληλες στιγμές, τα συμβάντα ενεργοποίησης, απενεργοποίησης, επανάληψης και εξόδου θα ενεργοποιηθούν για το στοιχείο λήψης. Ταυτόχρονα, εάν σύρετε ένα στοιχείο drag2 που δεν ταιριάζει με τον επιλογέα που καθορίζεται στην παράμετρο αποδοχής, τότε αυτά τα συμβάντα δεν θα ενεργοποιηθούν. Αυτό το στοιχείο μπορεί να μετακινηθεί ελεύθερα, αλλά δεν θα γίνει αντιληπτό από το στοιχείο λήψης.
Παρατηρήστε την αλλαγή στον τρόπο με τον οποίο επιλέγουμε ένα αποδεκτό floatable στοιχείο στο οποίο θα καλέσουμε τη μέθοδο text(). Όταν υπήρχε μόνο ένα κινούμενο στοιχείο στο έγγραφο, το χαρακτηριστικό id ήταν αρκετό για αυτό:
Drop: function() ( $("#draggable").text("Left") ),
Σε αυτό το παράδειγμα, υπάρχουν δύο επιπλεύσιμα στοιχεία και η επιλογή με το χαρακτηριστικό id δεν θα παράγει το επιθυμητό αποτέλεσμα, καθώς το κείμενο σε αυτήν την περίπτωση θα αλλάζει πάντα στο ίδιο κινητή στοιχείο, ανεξάρτητα από το ποιο είναι αποδεκτό για το στοιχείο λήψης.
Η λύση είναι να χρησιμοποιήσετε το αντικείμενο UI, το οποίο το jQuery UI παρέχει ως πρόσθετο όρισμα σε κάθε πρόγραμμα χειρισμού συμβάντων. Η ιδιότητα μεταφοράς ενός αντικειμένου περιβάλλοντος χρήστη επιστρέφει ένα αντικείμενο jQuery που περιέχει το στοιχείο που ο χρήστης σύρει ή προσπαθεί να ρίξει στο στοιχείο προορισμού, επιτρέποντας την επιλογή του επιθυμητού στοιχείου ως εξής:
Drop: function(event, ui) ( ui.draggable.text("Left") ),
Αλλαγή του ορίου επικάλυψηςΑπό προεπιλογή, το συμβάν υπέρβασης εμφανίζεται μόνο όταν τουλάχιστον το 50% του στοιχείου που μετακινείται επικαλύπτει το στοιχείο λήψης. Το ποσό αυτής της επικάλυψης ορίου μπορεί να αλλάξει χρησιμοποιώντας την επιλογή ανοχής, η οποία μπορεί να λάβει τις τιμές που εμφανίζονται στον παρακάτω πίνακα:
Οι δύο αξίες που χρησιμοποιώ πιο συχνά είναι η εφαρμογή και η αφή γιατί έχουν το μεγαλύτερο νόημα για τους χρήστες. Χρησιμοποιώ fit όταν το στοιχείο που σύρεται πρέπει να παραμείνει στην περιοχή του στοιχείου λήψης στο οποίο μετακινήθηκε και αγγίζω όταν το στοιχείο που σύρεται πρέπει να επιστρέψει στην αρχική του θέση (θα δοθεί ένα παράδειγμα παρακάτω). Ένα παράδειγμα χρήσης των παραμέτρων προσαρμογής και αφής δίνεται παρακάτω:
Η τιμή κλώνου λέει στο jQuery UI να δημιουργήσει ένα αντίγραφο του στοιχείου που μετακινείται, μαζί με όλα τα περιεχόμενά του, και να χρησιμοποιήσει το αποτέλεσμα που προκύπτει ως βοηθητικό στοιχείο. Το αποτέλεσμα φαίνεται στο σχήμα:
Το βοηθητικό στοιχείο αφαιρείται όταν ο χρήστης αφήσει το κουμπί του ποντικιού πάνω από το στοιχείο που μετακινείται, αφήνοντας το στοιχείο που μετακινείται και το στοιχείο λήψης στην αρχική τους θέση.
Όπως φαίνεται στο σχήμα, το αρχικό στοιχείο που μετακινείται παραμένει στη θέση του και μόνο το βοηθητικό στοιχείο κινείται γύρω από την οθόνη ακολουθώντας τον δείκτη του ποντικιού. Εάν το μέγεθος του μετακινούμενου στοιχείου είναι μεγάλο, όπως στο παράδειγμά μας, τότε καλύπτει τα υπόλοιπα στοιχεία του εγγράφου, έτσι ώστε να είναι δύσκολο για τον χρήστη να παρακολουθήσει ακόμη και τη θέση του στοιχείου λήψης. Αυτό το πρόβλημα μπορεί να αντιμετωπιστεί παρέχοντας τη συνάρτηση ως τιμή της επιλογής βοηθού, όπως φαίνεται στο παρακάτω παράδειγμα:
... $(function() ( $("div.draggable")..png"/>") )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ...Παράδειγμα εκτέλεσης
Όταν ο χρήστης αρχίζει να σύρει ένα στοιχείο, το jQuery UI καλεί τη συνάρτηση που καθορίζεται από την βοηθητική παράμετρο και χρησιμοποιεί το επιστρεφόμενο στοιχείο ως αντικείμενο προς μεταφορά. Σε αυτήν την περίπτωση, χρησιμοποιώ το jQuery για να δημιουργήσω το στοιχείο img. Το αποτέλεσμα φαίνεται στο σχήμα:
Μια μικρή εικόνα λειτουργεί ως πληρεξούσιος για το στοιχείο που μετακινείται, καθιστώντας πολύ πιο εύκολη την παρακολούθηση άλλων στοιχείων στο έγγραφο.
Το αντικείμενο Ui που μεταβιβάζει το jQuery UI στα συμβάντα αλληλεπίδρασης του Droppable περιέχει μια ιδιότητα βοηθού και αυτή η ιδιότητα μπορεί να χρησιμοποιηθεί για τον χειρισμό του βοηθού καθώς σύρεται. Ένα παράδειγμα χρήσης αυτής της ιδιότητας σε συνδυασμό με τα συμβάντα πέρα και έξω δίνεται παρακάτω:
... $(function() ( $("div.draggable")..png"/>") )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , out: function(event, ui) ( ui.helper.css("border", "") ) )); )); ...
Εδώ τα συμβάντα πάνω και έξω και η ιδιότητα ui.helper χρησιμοποιούνται για την εμφάνιση ενός περιγράμματος γύρω από το βοηθητικό στοιχείο όταν αυτό επικαλύπτει το στοιχείο λήψης. Το αποτέλεσμα φαίνεται στο σχήμα:
Χρησιμοποιώντας την επιλογή snap, μπορείτε να διασφαλίσετε ότι το μετακινούμενο στοιχείο "έλκεται" στις άκρες των στοιχείων δίπλα από τα οποία περνά. Αυτή η επιλογή δέχεται έναν επιλογέα ως τιμή. Το στοιχείο που μετακινείται θα κουμπώσει στις άκρες οποιουδήποτε στοιχείου που ταιριάζει με τον καθορισμένο επιλογέα. Ένα παράδειγμα χρήσης της επιλογής snap δίνεται παρακάτω:
Εκτέλεση παράδειγμα διεπαφής χρήστη jQuery #snapper, .draggable, .droppable (μέγεθος γραμματοσειράς: μεγάλο, περίγραμμα: μεσαίο συμπαγές μαύρο, padding: 4px, πλάτος: 150px, text-align: center, background-color: lightgray, margin-bottom: 10px ;. μεσαίο συμπαγές πράσινο) .droppable.hover (χρώμα φόντου: ανοιχτό πράσινο) #snapper (θέση: απόλυτη; αριστερά: 35%; περίγραμμα: μεσαίο συμπαγές μαύρο; πλάτος: 180 px; ύψος: 50 px) $(function() ( $(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "και τα δύο", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: "αιωρείται" )); )); Καλάθι Κουμπώστε εδώ Σύρετε με
Όταν ένα κινούμενο στοιχείο πλησιάζει ένα από τα κατάλληλα στοιχεία, «έλκεται», σαν να λέγαμε, σε αυτό με τέτοιο τρόπο ώστε οι παρακείμενες άκρες τους να εφάπτονται. Για ένα τέτοιο δέσιμο, μπορείτε να επιλέξετε οποιοδήποτε στοιχείο, όχι μόνο το στοιχείο λήψης. Σε αυτό το παράδειγμα, πρόσθεσα ένα στοιχείο div και έθεσα την επιλογή snap σε μια τιμή που επιλέγει αυτό το στοιχείο καθώς και το στοιχείο λήψης στο έγγραφο.
Υπάρχουν μερικές βοηθητικές επιλογές που σας επιτρέπουν να προσαρμόσετε με μεγαλύτερη ακρίβεια τη συμπεριφορά αγκύρωσης των στοιχείων. Ένα από αυτά είναι η επιλογή snapMode. Με τη βοήθειά του μπορείτε να καθορίσετε τον τύπο βιβλιοδεσίας. Επιτρέπονται οι ακόλουθες τιμές: εσωτερικός(κουμπώστε στις εσωτερικές άκρες των στοιχείων), εξωτερικός(κουμπώστε στις εξωτερικές άκρες των στοιχείων) και και τα δυο(κουμπώστε σε όλες τις άκρες, προεπιλογή).
Η επιλογή snapTolerance σάς επιτρέπει να καθορίσετε πόσο μακριά πρέπει να πλησιάζει το αιωρούμενο στοιχείο στην άκρη του στοιχείου στόχου πριν συμβεί το κούμπωμα. Η προεπιλεγμένη τιμή είναι 20, που σημαίνει 20 pixel. Το παράδειγμα χρησιμοποιεί μια τιμή 50, η οποία αντιστοιχεί σε ένα κούμπωμα σε μεγαλύτερη απόσταση. Είναι πολύ σημαντικό να επιλέξετε τη σωστή τιμή για αυτήν την επιλογή. Εάν η τιμή snapTolerance είναι πολύ χαμηλή, ο χρήστης μπορεί να μην παρατηρήσει το εφέ κουμπώματος και εάν είναι πολύ υψηλή, το στοιχείο που μετακινείται θα αρχίσει να κάνει απροσδόκητα άλματα, κουμπώνοντας σε μακρινά στοιχεία.
Χρήση τεχνολογίας μεταφορά και απόθεση(drag and drop) επιτρέπει στο χρήστη να μετακινεί διάφορα αντικείμενα από το ένα στο άλλο, για παράδειγμα, στοιχεία μιας λίστας σε μια άλλη. Για να το κάνετε αυτό, πρέπει να χρησιμοποιήσετε δύο χειριστήρια: νεροχύτη και πηγή. Ο δέκτης είναι το αντικείμενο που θα λάβει το αντικείμενο προέλευσης (το αντικείμενο που μετακινείται).
Τα γεγονότα που συμβαίνουν κατά την κίνηση των αντικειμένων παρατίθενται παρακάτω με τη σειρά με την οποία συμβαίνουν.
OnStartDrag(τύπος TStartDragEvent) - στην αρχή της λειτουργίας, που δημιουργείται από το αντικείμενο προέλευσης. Παράμετροι που μεταβιβάζονται στον χειριστή συμβάντων: Αντικείμενο δέκτη DragObject (τύπος TDragObject), Αντικείμενο προέλευσης (τύπος TObject).
OnDragOver(τύπος TDragOverEvent) - δημιουργεί ένα αντικείμενο δέκτη όταν ένα αντικείμενο που έχει συρθεί βρίσκεται πάνω του. Παράμετροι που μεταβιβάζονται στον χειριστή συμβάντων: αντικείμενο δέκτη Αποστολέας (τύπος TObject), αντικείμενο πηγής Πηγή (τύπος TObject), κατάσταση κίνησης (τύπος TDragState), X και Y (τύπος ακέραιος αριθμός) - τρέχουσες συντεταγμένες του δείκτη του ποντικιού, Αποδοχή ( τύπου boolean ) σημάδι επιβεβαίωσης της λειτουργίας μετακίνησης. Η κατάσταση κίνησης καθιστά σαφές εάν το αντικείμενο που μετακινείται βρίσκεται στην περιοχή του δέκτη, κινείται μέσα σε αυτήν ή το έχει εγκαταλείψει. Οι περασμένες παράμετροι επιτρέπουν στο αντικείμενο προορισμού να αποδεχτεί ή να απορρίψει το αντικείμενο προέλευσης. Η παράμετρος Accept έχει οριστεί σε Trye εάν γίνει αποδεκτή η λειτουργία μετακίνησης, διαφορετικά ορίζεται σε False.
onDragDrop (τύπος TDragDropEvent) - δημιουργείται από το αντικείμενο του δέκτη όταν το αντικείμενο που σύρεται πέφτει πάνω του. Στο πρόγραμμα χειρισμού συμβάντων μεταβιβάζονται οι τρέχουσες συντεταγμένες του δείκτη του ποντικιού, του αντικειμένου του δέκτη αποστολέα (τύπος TObject) και του αρχικού αντικειμένου κίνησης Πηγή (τύπος TObject).
onEndDrag (Τύπος EndDragEvent) - Αυξάνεται όταν ολοκληρωθεί μια λειτουργία μεταφοράς. Οι συντεταγμένες X και Y του σημείου όπου το αντικείμενο αποστολέα πηγής και το αντικείμενο στόχος παραλήπτη μεταβιβάζονται στον χειριστή συμβάντων.
Για να δημιουργήσετε ένα drag and drop, αρκεί να εφαρμόσετε δύο συμβάντα: OnDragDrop και OnDragOver με την ιδιότητα DragMode να έχει οριστεί σε dmAutomatic. Διαφορετικά, η έναρξη της λειτουργίας μεταφοράς, η μέθοδος BeginDrag, πρέπει να κωδικοποιηθεί από τον προγραμματιστή.
Για να ενοποιήσουμε το υλικό, θα δημιουργήσουμε την παρακάτω εφαρμογή. Τοποθετήστε το στοιχείο του πίνακα στη φόρμα. Ορίστε την ιδιότητα DragMode του Object Inspector σε dmAutomatic. Ας επιλέξουμε το αντικείμενο φόρμας και ας χρησιμοποιήσουμε το Object Inspector για να δημιουργήσουμε τα ακόλουθα συμβάντα:
Διαδικασία TForm1.FormDragOver(Αποστολέας, Πηγή: TObject; X, Y: Integer; Κατάσταση: TDragState; var Accept: Boolean); ξεκινήστε αν Πηγή = Πίνακας1 τότε Αποδοχή:= Σωστό αλλιώς Αποδοχή:= Λάθος; τέλος; διαδικασία TForm1.FormDragDrop(Αποστολέας, Πηγή: TObject; X, Y: Integer); start Panel1.Left:= X; Panel1.Top:= Y; τέλος;
Τώρα εκκινώντας την εφαρμογή και κάνοντας κλικ στο κουμπί του ποντικιού πάνω από τον πίνακα, μπορούμε να μετακινήσουμε το αντικείμενο του πίνακα σε όλη τη φόρμα.
Συμπέρασμα: εξοικειωθήκαμε με την τεχνολογία μεταφορά και απόθεση(drag and drop) και το χρησιμοποίησε στην πράξη.
Οι τεχνικές μεταφοράς και απόθεσης έχουν εξελιχθεί εδώ και πολλά χρόνια. Δεν αποτελεί έκπληξη το γεγονός ότι με τον αυξανόμενο αριθμό προγραμματιστών που αναπτύσσουν πρόσθετα ανοιχτού κώδικα (όπως το jQuery), οι παλιές μέθοδοι αναβιώνουν. Η βιβλιοθήκη JavaScript έχει υψηλή απόκριση και προσφέρει πολλές βελτιώσεις σε αυτήν την εποχή της τεχνολογίας Ιστού.
Σε αυτό το σεμινάριο θα φτιάξουμε ένα σενάριο που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε δυναμικά ορθογώνια μεταφοράς και απόθεσης στον ιστότοπό σας. Η διαχείριση της διαδικασίας γίνεται από το jQuery. Τέτοια σενάρια εξοικονομούν χρόνο παρέχοντας έτοιμη λειτουργικότητα! Και η βιβλιοθήκη μεταφοράς και απόθεσης μπορεί να χρησιμοποιηθεί σε άλλα έργα.
Πρώτα απ 'όλα, ας ετοιμάσουμε μια μικρή ιστοσελίδα για το έργο. Στο φάκελο του έργου πρέπει να δημιουργήσετε δύο καταλόγους με τα αξιοσημείωτα ονόματα "js" και "css" και ένα κενό αρχείο index.html. Ο κώδικας θα είναι πολύ απλός, έτσι ώστε να υπάρχει μια σαφής ιδέα για το έργο και να υπάρχει ένα σημείο για περαιτέρω ανάπτυξη.
Παρακάτω είναι ο κώδικας για το αρχείο HTML μας. Στο κεφάλαιο κεφάλιπεριλαμβάνουμε 3 σενάρια. Το κύριο σενάριο jQuery θα φορτωθεί από τον διακομιστή Κώδικα Google. Περιλαμβάνεται επίσης το αρχείο στυλ style.css, το οποίο περιέχει τις κύριες ιδιότητες για τη διαμόρφωση εμφάνισητο έγγραφό μας.
Σύρετε με Ναι, ναι. Ακριβώς εγώ. Μπορείτε να με σύρετε και εμένα ( zIndex: 200, αδιαφάνεια: .9 )
P.S.: μπορείς να με αφήσεις οπουδήποτε!
Εσωτερικό τμήμα σώματοποθετούνται μόνο δύο μπλοκ div, που περιέχουν και τα δύο ορθογώνια. Ο κώδικας είναι αρκετά απλός και κατανοητός. Μέσα σε κάθε ορθογώνιο υπάρχουν κεφαλίδες με τον χειριστή κλάσεων και τον χειριστή2. Αυτό είναι σημαντικό γιατί κάθε ορθογώνιο συμπεριφέρεται διαφορετικά καθώς σύρετε.
Ο κώδικας HTML είναι πολύ απλός. Εάν κατανοείτε τη βασική σήμανση, τότε ούτε τα στυλ CSS θα είναι δύσκολα. Κυρίως καθορισμένα περιθώρια, βάτες και χρώματα.
Body,html ( γραμματοσειρά-οικογένεια:Calibri, sans-serif; φόντο:#eaf3fb; μέγεθος γραμματοσειράς:12px; ύψος:1000px; ύψος γραμμής:18px;) p (ύψος:30px; )
Επιλογείς σώμα, htmlχρησιμοποιούνται μόνο για τη σελίδα επίδειξης. Και όλο το περιεχόμενο τοποθετείται σε δύο συρόμενα ορθογώνια.
Dv1 (πλάτος:200px;χρώμα φόντου:#eff7ff; περίγραμμα:1px συμπαγές #96c2f1; position:absolute; αριστερά:100px; επάνω:100px; ) .dv1 h2 (χρώμα φόντου:#b2d3f5; padding:5px; γραμματοσειρά- οικογένεια:Georgia, "Times New Roman", Times, σερίφ; μέγεθος γραμματοσειράς:1.0em; text-transform:κεφαλαία; γραμματοσειρά βάρους:bold; color:#3a424a; margin:1px; cursor:move; ) .dv1 div ( padding:5px; margin-bottom:10px; ) .dv2 ( background-color:#f6ebfb; περίγραμμα:1px στερεό #a36fde; πλάτος:550px; position:absolute; δρομέας:move; αριστερά:400px; επάνω:230px; ) .dv2 h2 (χρώμα φόντου:#eacfe9, διάστιχο: -0,09em, μέγεθος γραμματοσειράς: 1,8 εκ., βάρος γραμματοσειράς: έντονη, συμπλήρωση: 15 εικονοστοιχεία, περιθώριο: 1 εικονοστοιχεία, χρώμα:#241f24, δρομέας: μετακίνηση; ) .dv2 .content2 ( padding:5px; margin-bottom:10px; )
Και για τις δύο κλάσεις .dv1 και .dv2 χρησιμοποιούμε απόλυτη τοποθέτηση. Αυτό δεν είναι απαραίτητο και πιθανότατα όχι το μεγαλύτερο Ο καλύτερος τρόποςγια να τοποθετήσετε τα draggable ορθογώνια. Ωστόσο, για το παράδειγμά μας, αυτή η τοποθέτηση έχει νόημα, αφού κάθε φορά που ανανεώνεται η σελίδα, τα ορθογώνια εγκαθίστανται σε συγκεκριμένα σημεία.
Επίσης οι γραμματοσειρές και τα χρώματα είναι διαφορετικά για τα ορθογώνια για να είναι πιο εύκολο να δείτε τη διαφορά.
Διαφορετικά, οι επικεφαλίδες και το περιεχόμενο των μπλοκ είναι σχεδόν πανομοιότυπα. Εάν πρόκειται να αντιγράψετε στυλ στο έργο σας, αλλάξτε τα ονόματα πριν ξεκινήσετε. Σε ορισμένες περιπτώσεις, είναι πιο λογικό να χρησιμοποιείτε αναγνωριστικά αντί για κλάσεις, όπως όταν χρησιμοποιείτε την τεχνική μεταφοράς και απόθεσης για ένα συγκεκριμένο μπλοκ.
Ανάλυση JavaScriptΔύο αρχεία JavaScript περιέχουν όλο τον κώδικα που απαιτείται για να λειτουργήσει. Θα παραλείψουμε τις λεπτομέρειες της εργασίας με το jQuery, καθώς αυτό είναι πέρα από το πεδίο του μαθήματος. Ας δώσουμε προσοχή στο αρχείο jquery.dragdrop.js.
Η γραμμή 22 ορίζει τη λειτουργία Drags.
$.fn.Drags = function(opts) ( var ps = $.extend(( zIndex: 20, opacity: .7, handler: null, onMove: function() ( ), onDrop: function() ( ) ), opts )
Αυτό ορίζει τη μεταβλητή επιστροφής και τα δεδομένα αρχικοποίησης για Σέρνει. Αυτή η μέθοδος χρησιμοποιείται πολύ συχνά όταν εργάζεστε με jQuery για να μεταβιβάσετε επιλογές σε άλλες συναρτήσεις. Εσωτερικά ορίζουμε μεταβλητές για όλες τις διαθέσιμες επιλογές για τα ορθογώνια που σύρονται.
Το επόμενο κομμάτι κώδικα περιλαμβάνει χειριστές συμβάντων για τη μεταβλητή dragdrop. Και τα δύο γεγονότα σέρνωΚαι πτώσηΛειτουργίες κλήσεων που περνούν τις παραμέτρους συμβάντος σε αυτές. Αυτά τα συμβάντα συμβαίνουν όταν πατάτε το κουμπί του ποντικιού για να σύρετε ένα αντικείμενο και μετά να το αφήσετε.
Var dragdrop = ( drag: function(e) ( var dragData = e.data.dragData; dragData.target.css(( αριστερά: dragData.left + e.pageX - dragData.offLeft, επάνω: dragData.top + e.pageY - dragData.offTop )); dragData.handler.css(( δρομέας: "move" )); dragData.target.css (( δρομέας: "move" )); dragData.onMove(e); ), drop: function( ε) ( var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css(( "αδιαφάνεια": "" )); dragData.handler.css("δρομέας", dragData. oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragdrop.drag) .unbind("mouseup", dragdrop.drop); ) )
Οι συναρτήσεις μας χειρίζονται τη θέση CSS κάθε αντικειμένου. Η αλλαγή της απόλυτης τοποθέτησης των αντικειμένων σας δεν θα επηρεάσει τον τρόπο λειτουργίας του κώδικά σας, καθώς κάθε συνάρτηση JavaScript αλλάζει όποιο στυλ έχει οριστεί για το αντικείμενο.
Ο υπόλοιπος κώδικας ελέγχει τον χειριστή και κάνει αισθητικές αλλαγές σε άλλα στυλ. Εδώ μπορείτε να προσθέσετε αλλαγές στη διαφάνεια, τη γραμματοσειρά και το χρώμα γραμματοσειράς ή να προσθέσετε νέες παραγράφους.
Λειτουργίες μεταφοράς/απόθεσηςΤο δεύτερο αρχείο fn.js περιέχει πολύ απλό κώδικα. Περιμένουμε πλήρες φορτίοέγγραφο, μετά το οποίο καλούμε τις λειτουργίες μας. Ορίζονται δύο περιπτώσεις της συνάρτησης Σέρνει, που συζητήθηκε νωρίτερα.
Έχουμε δύο κινητά μπλοκ με κλάσεις .dv1 και .dv2. Εάν πρέπει να αφήσετε ένα κινητό μπλοκ, τότε πρέπει απλώς να αφαιρέσετε το δεύτερο μέρος του κώδικα. Η προσθήκη ενός άλλου κινητού μπλοκ είναι επίσης εύκολη. Απλά πρέπει να προσθέσετε μια νέα συνάρτηση σε αυτό το αρχείο.
Το πρώτο βήμα είναι να ορίσετε τις επιλογές κατά την κλήση της συνάρτησης. Βεβαιωθείτε ότι έχετε ορίσει το όνομα του χειριστή. Με αυτό, λέμε στην jQuery ποιο πρόγραμμα χειρισμού να χρησιμοποιήσει όταν πατηθεί το κουμπί του ποντικιού σε μια συγκεκριμένη περιοχή του εγγράφου. Το όνομα του χειριστή μπορεί να είναι μια κλάση ή ένα χαρακτηριστικό ID.
Η πρώτη μας συνάρτηση έχει δύο χειριστές συμβάντων onMove και onDrop. Και οι δύο καλούν νέες συναρτήσεις που μεταβιβάζονται στο τρέχον συμβάν ως μεταβλητές. Εδώ γίνεται χειρισμός του κώδικα HTML στο ορθογώνιο ώστε να ενημερώνεται με κάθε κίνηση. Αυτό είναι ένα εξαιρετικό εφέ για να δείξετε πώς μπορείτε να ελέγξετε μια διαδικασία χρησιμοποιώντας απλά συμβάντα jQuery.
Στη δεύτερη συνάρτηση χρησιμοποιούμε τις παραμέτρους z-Index και opacity. Μπορείτε να προσθέσετε άλλες ιδιότητες CSS; αλλά αυτό θα απαιτήσει εκ νέου επεξεργασία του κώδικα JavaScript, ώστε να ελεγχθούν οι ρυθμίσεις. Για παράδειγμα, μπορείτε να περάσετε διαφορετικό στυλ γραμματοσειράς ή τιμές για το ύψος και το πλάτος ενός κινούμενου ορθογωνίου - ένα πολύ ενδιαφέρον κόλπο!
συμπέρασμαΜε λίγη δουλειά, έχουμε τώρα μια εξαιρετική διεπαφή μεταφοράς και απόθεσης στη διάθεσή μας. Το jQuery παρέχει τεράστια οφέλη για προγραμματιστές που θέλουν να χρησιμοποιήσουν παλιές μεθόδους στα έργα τους.
Ως αποτέλεσμα, δεν έχουμε μόνο συναρτήσεις χειριστή συμβάντων, αλλά μπορούμε επίσης να περάσουμε νέες μεταβλητές σε μπλοκ με δυνατότητα μεταφοράς. Αυτό ανοίγει νέες δυνατότητες δημιουργικότητας. Η επίδειξη για το μάθημα περιέχει μόνο ένα σκίτσο του τι μπορεί να γίνει χρησιμοποιώντας τέτοιο κώδικα.
Ελέγξτε λοιπόν την τεκμηρίωση του jQuery για να χρησιμοποιήσετε τις λειτουργίες της βιβλιοθήκης.
Για τη βιβλιοθήκη VCL, η Borland έχει εφαρμόσει τη δική της έκδοση της διεπαφής Drag&Drop (μεταφρασμένη ως "drag and drop"). Αυτή η διεπαφή είναι εσωτερική - μπορείτε να στείλετε και να λάβετε οποιαδήποτε στοιχεία ελέγχου Delphi μέσα στη φόρμα (εκτός από την ίδια τη φόρμα). Υλοποιείται χωρίς τη χρήση των αντίστοιχων λειτουργιών API των Windows - πρέπει να χρησιμοποιούνται κατά την οργάνωση επικοινωνίας με άλλες εργασίες με μεταφορά και απόθεση.
Κάνοντας κλικ στο αριστερό κουμπί του ποντικιού πάνω από ένα στοιχείο ελέγχου, μπορούμε να το «σύρουμε» σε οποιοδήποτε άλλο στοιχείο. Από τη σκοπιά ενός προγραμματιστή, αυτό σημαίνει ότι κατά τις στιγμές μεταφοράς και απελευθέρωσης ενός κλειδιού, δημιουργούνται ορισμένα συμβάντα, τα οποία μεταδίδουν όλες τις απαραίτητες πληροφορίες - έναν δείκτη στο αντικείμενο που σύρεται, τις τρέχουσες συντεταγμένες του δρομέα κ.λπ. Ο παραλήπτης των συμβάντων είναι το στοιχείο στο οποίο βρίσκεται αυτή τη στιγμή ο δρομέας. Ο χειριστής συμβάντων για ένα τέτοιο συμβάν πρέπει να πει στο σύστημα εάν το στοιχείο ελέγχου λαμβάνει την αποστολή ή όχι. Όταν απελευθερωθεί το κουμπί πάνω από το χειριστήριο λήψης, δημιουργούνται ένα ή δύο ακόμη συμβάντα, ανάλογα με την ετοιμότητα του δέκτη.
CancelDrag Ακυρώνει την τρέχουσα λειτουργία drag-and-drop ή drag-and-dock.
Συνάρτηση FindDragTarget (const Pos: TPoint ; AllowDisabled: Boolean ): TControl ;
Η συνάρτηση επιστρέφει ένα αντικείμενο της βασικής κλάσης TControl, το οποίο αναφέρεται στη θέση της οθόνης με τις συντεταγμένες που ορίζονται από την παράμετρο Pos. Αυτή η λειτουργία χρησιμοποιείται για τον προσδιορισμό του πιθανού παραλήπτη μιας λειτουργίας μεταφοράς και απόθεσης ή μεταφοράς και σύνδεσης. Εάν δεν υπάρχει στοιχείο ελέγχου παραθύρου για την καθορισμένη θέση, τότε η συνάρτηση επιστρέφει μηδέν. Η παράμετρος AllowDisabled καθορίζει εάν θα ληφθούν υπόψη τα απενεργοποιημένα αντικείμενα.
Λειτουργία isDragObject (αποστολέας: tobject): boolean;
Η συνάρτηση καθορίζει εάν το αντικείμενο που καθορίζεται στην παράμετρο Αποστολέας είναι απόγονος της κλάσης TDragObject. Αυτή η συνάρτηση μπορεί να χρησιμοποιηθεί ως παράμετρος Source στους χειριστές συμβάντων OnDragOver και OnDockOver για να καθοριστεί εάν το αντικείμενο που σύρεται θα γίνει αποδεκτό. Η συνάρτηση IsDragObject μπορεί επίσης να χρησιμοποιηθεί ως παράμετρος Source στους χειριστές συμβάντων OnDragDrop και OnDockDrop προκειμένου να ερμηνευτεί σωστά το αντικείμενο που έχει συρθεί.
Ιδιότητες DragMode, DragCursor, μέθοδοι BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, Accept παράμετρος
Η διαδικασία μεταφοράς πληροφοριών από ένα αντικείμενο σε άλλο χρησιμοποιώντας το ποντίκι χρησιμοποιείται ευρέως στα Windows. Μπορείτε να μετακινήσετε αρχεία μεταξύ φακέλων, να μετακινήσετε τους ίδιους τους φακέλους κ.λπ.
Όλες οι ιδιότητες, οι μέθοδοι και τα συμβάντα που σχετίζονται με τη διαδικασία μεταφοράς και απόθεσης ορίζονται στην κλάση TControl, η οποία είναι ο προγονέας όλων των οπτικών στοιχείων του Delphi. Επομένως είναι κοινά σε όλα τα εξαρτήματα.
Η έναρξη της μεταφοράς καθορίζεται από την ιδιότητα DragMode, η οποία μπορεί να οριστεί σε χρόνο σχεδίασης ή προγραμματικά ίση με dmManual ή dmAutomatic. Η τιμή dmAutomatic καθορίζει εάν η διαδικασία μεταφοράς θα ξεκινήσει αυτόματα όταν ο χρήστης πατήσει ένα κουμπί του ποντικιού πάνω από ένα στοιχείο. Ωστόσο, σε αυτήν την περίπτωση, το συμβάν OnMouseDown που σχετίζεται με τον χρήστη που κάνει κλικ στο κουμπί του ποντικιού δεν εμφανίζεται καθόλου για αυτό το στοιχείο.
Η διεπαφή για τη μεταφορά και τη λήψη στοιχείων εμφανίστηκε εδώ και πολύ καιρό. Επιτρέπει σε δύο χειριστήρια να αλληλεπιδρούν ενώ η εφαρμογή εκτελείται. Σε αυτή την περίπτωση, μπορούν να γίνουν οι απαραίτητες ενέργειες. Παρά την ευκολία εφαρμογής και τη μακροχρόνια ανάπτυξη, πολλοί προγραμματιστές (κυρίως αρχάριοι) θεωρούν αυτόν τον μηχανισμό σκοτεινό και εξωτικό. Ωστόσο, η χρήση Drag-and-Drop μπορεί να είναι πολύ χρήσιμη και εύκολη στην εφαρμογή. Τώρα θα βεβαιωθούμε για αυτό.
Για να λειτουργήσει ο μηχανισμός, πρέπει να ρυθμιστούν αντίστοιχα δύο χειριστήρια. Το ένα πρέπει να είναι πηγή (Πηγή), το δεύτερο να είναι δέκτης (Στόχος). Σε αυτήν την περίπτωση, η πηγή δεν κινείται πουθενά, αλλά καταχωρείται μόνο ως τέτοια στον μηχανισμό.
Πιστέψτε με, αρκεί απλώς να μετατρέψετε τις συντεταγμένες X,Y που μεταβιβάζονται στις παραμέτρους των συμβάντων OnDragOver και OnDragDrop σε συντεταγμένες φόρμας.
Εργαστείτε με τις ιδιότητες Left και Top του στοιχείου πάνω στο οποίο μετακινείται ο δρομέας. Επιτρέψτε μου να σας δώσω ένα απλό παράδειγμα. Τοποθετήστε ένα στοιχείο Σημείωση στη φόρμα και ορίστε την ιδιότητα Align σε alTop. Τοποθετήστε ένα πλαίσιο στη φόρμα, ορίστε επίσης την ιδιότητα Align σε alTop και ορίστε την ιδιότητα Height σε μια μικρή τιμή, ας πούμε 6 ή 7 pixel. Ορίστε το DragMode σε dmAutomatica και το DragCursor σε crVSplit. Τοποθετήστε ένα άλλο στοιχείο Σημείωσης και ορίστε το Align σε alClient. Επιλέξτε ταυτόχρονα και τα δύο στοιχεία Memo, τον πίνακα και δημιουργήστε ένα κοινό πρόγραμμα χειρισμού συμβάντων OnDragOver όπως φαίνεται παρακάτω:
Πρόσφατα είχα μια ιδέα να ξεκινήσω την ανάπτυξη ενός παιχνιδιού για Android. Αρχικά, αποφάσισα να γράψω σκάκι. Μου φάνηκε ότι η τεχνολογία Drag and Drop θα ήταν τέλεια για την εφαρμογή του μηχανισμού για κινούμενες φιγούρες. Για τους μη μυημένους, σημειώνω ότι η μέθοδος μεταφοράς και απόθεσης είναι η δυνατότητα μεταφοράς ενός αντικειμένου γραφικών σε ένα άλλο και εκτέλεσης μιας ή άλλης ενέργειας μετά την απελευθέρωσή του. Το απλούστερο παράδειγμα είναι η διαγραφή μιας συντόμευσης από την επιφάνεια εργασίας του υπολογιστή σας σύροντάς την στον κάδο απορριμμάτων. «Πετώντας» την ετικέτα στον κάδο απορριμμάτων, λέμε στο σύστημα ότι θέλουμε να αναγκάσουμε αυτά τα δύο αντικείμενα να αλληλεπιδράσουν. Το σύστημα λαμβάνει το σήμα μας και αποφασίζει ποια ενέργεια πρέπει να κάνει. Η μεταφορά και απόθεση έχει γίνει ευρέως διαδεδομένη λόγω της διαισθητικής διαύγειας. Αυτή η προσέγγιση υποστηρίζεται από την εμπειρία μας στην αλληλεπίδραση με αντικείμενα του πραγματικού κόσμου και λειτουργεί εξαιρετικά σε ένα εικονικό περιβάλλον. Όσον αφορά το σκάκι, χρησιμοποιώντας drag and drop είναι τεχνολογικά πιο εύκολο να προσδιορίσετε το κελί όπου ο χρήστης έσυρε το κομμάτι, καθώς δεν χρειάζεται να υπολογίσετε τον αριθμό του κελιού από τις συντεταγμένες του σημείου απελευθέρωσης. Αυτή την εργασία θα αναλάβει η εικονική μηχανή.
Η χρήση της τεχνολογίας μεταφοράς και απόθεσης μου επιτρέπει να λύσω τρία προβλήματα με λίγη προσπάθεια:
Τα καθήκοντα έχουν περιγραφεί, ας αρχίσουμε να τα υλοποιούμε.
Αντικατάσταση ImageView με την αφήΌλα τα σχήματά μου είναι αντικείμενα ImageView. Δυστυχώς, αποδείχτηκε ότι η εφαρμογή του Drag & Drop στο Android δεν επιτρέπει στο "direct out of the box" να αντικαταστήσει την εικόνα ενός αντικειμένου όταν αγγίζεται. Ωστόσο, αυτή η εργασία μπορεί να λυθεί πλήρως χρησιμοποιώντας το API. Θα χρειαστεί να εκτελέσουμε μια σειρά από απλά βήματα:
Αυτές οι ενέργειες πρέπει να υλοποιηθούν στο πρόγραμμα χειρισμού OnTouchListner του αντικειμένου ImageView. Για να γίνει αυτό, ας παρακάμψουμε τη μέθοδο onTouch:
@ Παράκαμψη δημόσιου boolean onTouch(Προβολή προβολής, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; Προβολή. DragShadow Builder dsb= new Builder. (προβολή) ; προβολή. startDrag(clipData, dsb, προβολή, 0 ) ; προβολή. setVisibility(View. INVISIBLE) ; return true ; ) else ( return false ; ) )Όλα είναι πολύ απλά. Λοιπόν, τακτοποιήσαμε την αντικατάσταση εικόνας, ας προχωρήσουμε στην επόμενη εργασία.
Περιορισμός της περιοχής μεταφοράς για τη συνάρτηση απόθεσης μεταφοράςΥπάρχει πρόβλημα με τον περιορισμό της περιοχής μεταφοράς. Το θέμα είναι ότι εάν απελευθερώσετε ένα κομμάτι έξω από τον πίνακα, το συμβάν πτώσης δεν θα συμβεί, αφού ο χρήστης άφησε το αντικείμενο σε κενό χώρο και δεν υπάρχει τίποτα για να αλληλεπιδράσει το αντικείμενο. Ως αποτέλεσμα, η φιγούρα δεν θα επιστρέψει στην αρχική της κατάσταση και θα παραμείνει κρυμμένη για πάντα. Πέρασα πολύ χρόνο διαβάζοντας την τεκμηρίωση, αλλά ακόμα δεν μπορούσα να βρω τρόπο να περιορίσω την περιοχή μεταφοράς και απόθεσης των αντικειμένων. Η επίγνωση ήρθε ξαφνικά. Δεν χρειάζεται να περιορίσω καθόλου την περιοχή, πρέπει να ξέρω αν ο χρήστης κυκλοφόρησε σωστά το σχήμα ή όχι.
Καθορισμός της σωστής αποδέσμευσης
Βρήκα απαντήσεις στις ερωτήσεις μου στην ενότητα "χειρισμός τελικών συμβάντων μεταφοράς" στον ιστότοπο Android Developers. Εδώ είναι μερικά βασικά σημεία:
Πρέπει λοιπόν να υποκλέψω το συμβάν ACTION_DRAG_ENDED και να καλέσω τη μέθοδο getResult. Εάν επιστρέψει false, τότε ο χρήστης έχει σύρει το κομμάτι από τον πίνακα και πρέπει να ρυθμίσω το ImageView σε ορατό τρόπο λειτουργίας.
@ Παράκαμψη δημόσιου boolean onDrag(Προβολή προβολής, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; Προβολή dragView= (Προβολή) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) (false) (false) if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( περιέχειDragable= true ; ) αλλιώς αν (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View; else.VISIBLE)= = DragEvent. ACTION_DROP& amp;& amp; περιέχειDragable) ( checkForValidMove((ChessBoardSquareLayoutView) προβολή, dragView) ; dragView. setVisibility(View. VISIBLE) ;) return true ; ) private boolean dropledEventEventRagEand ) ;)Τώρα ο χρήστης μπορεί να απελευθερώσει το σχήμα οπουδήποτε και δεν θα συμβεί τίποτα κακό.
Ορισμός έγκυρων κινήσεωνΤο τελευταίο μέρος του άρθρου είναι αφιερωμένο στον έλεγχο της εγκυρότητας της κίνησης που προσπαθεί να κάνει ο χρήστης. Πριν συζητήσω αυτό το θέμα λεπτομερώς, θα κάνω μια σύντομη σημείωση εξηγώντας τη δομή της αίτησής μου. Η σκακιέρα αντιπροσωπεύεται ως TableLayout και κάθε κελί είναι ένα παιδί ενός LinearLayout και έχει ένα OnDragListener.
Επιπλέον, κάθε OnDragListener αναφέρεται σε ένα αντικείμενο «διαμεσολαβητή», το οποίο φροντίζει για την αλληλεπίδραση των αντικειμένων του παιχνιδιού και θυμάται τη θέση του τρέχοντος κελιού.
Όταν ο χρήστης σύρει ένα κομμάτι πάνω από ένα κελί, είναι δυνατές οι ακόλουθες ενέργειες:
Παρακάτω είναι ο κώδικας που υλοποιεί την περιγραφόμενη λογική
@ Παράκαμψη δημόσιου boolean onDrag(Προβολή προβολής, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; Προβολή dragView= (Προβολή) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) (false) (false) if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( περιέχειDragable= true ; ) αλλιώς αν (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View; else.VISIBLE)= = DragEvent.ACTION_DROP& amp;& amp; περιέχειDragable) ( checkForValidMove((ChessBoardSquareLayoutView) προβολή, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) επιστροφή true ; )Όπως μπορείτε να δείτε, ανεξάρτητα από το αν η κίνηση είναι έγκυρη ή όχι, το ImageView μεταφέρεται στην ορατή κατάσταση. Ήθελα ο χρήστης να δει το σχήμα να κινείται. Ανέφερα νωρίτερα ότι ένα κελί είναι θυγατρικό του LayoutView. Αυτό γίνεται για να διευκολυνθεί η μετακίνηση του ImageView από κελί σε κελί. Παρακάτω είναι ο κώδικας για τη μέθοδο checkForValidMove, η οποία δείχνει πώς κινείται το ImageView.
ιδιωτικό void checkForValidMove(ChessBoardSquareLayoutView προβολή, Προβολή dragView) ( if (mediator. isValidMove(view) ) ( ViewGroup κάτοχος= (ViewGroup) dragView. getParent() ; κάτοχος. removeView(dragView) ; προβολή. addView (προβολή). (Βαρύτητα. ΚΕΝΤΡΟ) ; προβολή. showAsLanded() ; διαμεσολαβητής. handleMove(προβολή) ;) )Ελπίζω ότι αυτό το άρθρο θα σας βοηθήσει κατά την ανάπτυξη των δικών σας έργων.
