Για τη βιβλιοθήκη VCL, η Borland έχει εφαρμόσει τη δική της έκδοση της διεπαφής Drag&Drop (μεταφρασμένη ως "drag"). Αυτή η διεπαφή είναι εσωτερική - μπορείτε να στείλετε και να λάβετε οποιαδήποτε στοιχεία ελέγχου Delphi μέσα στη φόρμα "(εκτός από την ίδια τη φόρμα). Υλοποιείται χωρίς τη χρήση των αντίστοιχων λειτουργιών API των Windows - πρέπει να χρησιμοποιούνται κατά την οργάνωση επικοινωνίας με άλλες εργασίες με μεταφορά και απόθεση .
Κάνοντας κλικ αριστερό κουμπίτο ποντίκι πάνω από το στοιχείο ελέγχου, μπορούμε να το "σύρουμε" σε οποιοδήποτε άλλο στοιχείο. Από την πλευρά του προγραμματιστή, αυτό σημαίνει ότι κατά τις στιγμές μεταφοράς και απελευθέρωσης του κλειδιού, δημιουργούνται ορισμένα συμβάντα που μεταδίδουν όλες τις απαραίτητες πληροφορίες - έναν δείκτη στο αντικείμενο που σύρθηκε, τρέχουσες συντεταγμένες κέρσορα κ.λπ. Ο δέκτης συμβάντος είναι το στοιχείο επί του οποίου το αυτή τη στιγμήβρίσκεται ο κέρσορας. Ο χειριστής για ένα τέτοιο συμβάν πρέπει να πει στο σύστημα εάν το δεδομένο στοιχείο ελέγχου αποδέχεται την "αποστολή" ή όχι. Όταν απελευθερωθεί το κουμπί πάνω από το χειριστήριο του δέκτη, ενεργοποιούνται ένα ή δύο ακόμη συμβάντα, ανάλογα με την ετοιμότητα του δέκτη.
ΑκύρωσηΣύρετε Ακυρώνει την τρέχουσα λειτουργία drag-and-drop ή drag-and-dock.
Συνάρτηση FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;
Η συνάρτηση επιστρέφει ένα αντικείμενο της βασικής κλάσης TCελέγχου , που αναφέρεται στη θέση της οθόνης με τις συντεταγμένες που καθορίζονται από την παράμετρο Pos. Αυτή η λειτουργία χρησιμοποιείται για τον προσδιορισμό του πιθανού παραλήπτη μιας λειτουργίας μεταφοράς και απόθεσης ή μεταφοράς και σύνδεσης. Εάν δεν υπάρχει στοιχείο ελέγχου παραθύρου για την καθορισμένη θέση, τότε η συνάρτηση επιστρέφειμηδέν . Η παράμετρος AllowDisabled καθορίζει εάν θα ληφθούν υπόψη τα απενεργοποιημένα αντικείμενα.
Συνάρτηση IsDragObject(Αποστολέας: TObject): Boolean ;
Η συνάρτηση καθορίζει εάν το αντικείμενο που καθορίζεται στην παράμετρο Αποστολέας είναι απόγονος της κλάσης TDragObject . Αυτή η λειτουργίαμπορεί να χρησιμοποιηθεί ως παράμετρος Source στους χειριστές συμβάντων OnDragOver και OnDockOver για να καθοριστεί εάν το αντικείμενο που σύρεται θα γίνει αποδεκτό. Επίσης λειτουργία IsDragObjectμπορεί να χρησιμοποιηθεί ως παράμετρος Source στους χειριστές συμβάντων OnDragDrop και OnDockDrop προκειμένου να ερμηνευτεί σωστά το αντικείμενο που έχει συρθεί.
DragMode, Ιδιότητες DragCursor, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag μέθοδοι, Αποδοχή παραμέτρου
Η διαδικασία μεταφοράς πληροφοριών από ένα αντικείμενο σε άλλο με το ποντίκι χρησιμοποιείται ευρέως στα Widows. Μπορείτε να μετακινήσετε αρχεία μεταξύ φακέλων, να μετακινήσετε τους ίδιους τους φακέλους και πολλά άλλα.
Όλες οι ιδιότητες, οι μέθοδοι και τα συμβάντα που σχετίζονται με τη διαδικασία μεταφοράς και απόθεσης ορίζονται στην κλάση TControl, η οποία είναι η γονική αρχή όλων των οπτικών στοιχείων του Delphi. Επομένως, είναι κοινά σε όλα τα εξαρτήματα.
Η αρχή της μεταφοράς καθορίζεται από την ιδιότητα DragMode, η οποία μπορεί να οριστεί σε χρόνο σχεδιασμού ή προγραμματικά ίση με dmManual ή dmAutomatic. Η τιμή του dmAutomatic (αυτόματο) καθορίζει την αυτόματη έναρξη της διαδικασίας μεταφοράς όταν ο χρήστης κάνει κλικ στο κουμπί του ποντικιού πάνω από το στοιχείο. Ωστόσο, σε αυτήν την περίπτωση, το συμβάν OnMouseDown που σχετίζεται με το πάτημα του κουμπιού του ποντικιού από τον χρήστη δεν εμφανίζεται καθόλου για αυτό το στοιχείο.
Η διεπαφή για τη μεταφορά και τη λήψη στοιχείων εμφανίστηκε εδώ και πολύ καιρό. Παρέχει αλληλεπίδραση μεταξύ δύο στοιχείων ελέγχου κατά την εκτέλεση της εφαρμογής. Σε αυτή την περίπτωση, μπορούν να γίνουν οι απαραίτητες ενέργειες. Παρά την απλότητα εφαρμογής και την ηλικία ανάπτυξης, πολλοί προγραμματιστές (ειδικά αρχάριοι) θεωρούν αυτόν τον μηχανισμό σκοτεινό και εξωτικό. Ωστόσο, η χρήση Drag-and-Drop μπορεί να είναι πολύ χρήσιμη και εύκολη στην εφαρμογή. Τώρα θα το επαληθεύσουμε αυτό.
Για να λειτουργήσει ο μηχανισμός, πρέπει να ρυθμιστούν ανάλογα δύο χειριστήρια. Το ένα πρέπει να είναι η πηγή (Πηγή), το δεύτερο - ο δέκτης (Στόχος). Σε αυτήν την περίπτωση, η πηγή δεν κινείται πουθενά, αλλά καταχωρείται μόνο ως τέτοια στον μηχανισμό.
Πιστέψτε με, είναι αρκετά εύκολο να μεταμορφωθεί Συντεταγμένες X,Y, μεταβιβάστηκε στις παραμέτρους των συμβάντων OnDragOver και OnDragDrop, σε συντεταγμένες φόρμας.
Εργαστείτε με τις ιδιότητες Αριστερά και Επάνω του στοιχείου πάνω στο οποίο τοποθετείται ο κέρσορας. Θα δώσω ένα απλό παράδειγμα. Τοποθετήστε ένα στοιχείο Σημείωσης στη φόρμα και αντιστοιχίστε Ευθυγράμμιση ιδιοκτησίας alTop τιμή. Τοποθετήστε ένα πλαίσιο στη φόρμα, ορίστε επίσης την ιδιότητα Align σε alTop και ορίστε την ιδιότητα Height σε μια μικρή τιμή, ας πούμε 6 ή 7 pixel. Ορίστε το DragMode σε dmAutomatica και το DragCursor σε crVSplit. Τοποθετήστε ένα άλλο στοιχείο Σημείωσης και ορίστε το Align σε alClient. Επιλέξτε και τα δύο Σημειώματα ταυτόχρονα, στον πίνακα, και δημιουργήστε έναν κοινό χειριστή συμβάντων OnDragOver όπως φαίνεται παρακάτω:
Η δυνατότητα μεταφοράς και απόθεσης μπορεί να βοηθήσει στην ενίσχυση της απόδοσης του iPad σας. Δείτε πώς μπορείτε να το χρησιμοποιήσετε.
Έτσι, μπορείτε να μετακινήσετε ένα αρχείο από μια υπηρεσία αποθήκευσης cloud σε μια άλλη, να αντιγράψετε κείμενο από το Safari σε μια εφαρμογή επεξεργασίας κειμένου για να προσθέσετε μια προσφορά ή να δημιουργήσετε αντιγράφων ασφαλείαςορισμένες φωτογραφίες στην εφαρμογή αποθήκευσης αρχείων.
Πώς να σύρετε και να αποθέσετε φωτογραφίες, αρχεία και κείμενο
1. Αγγίξτε παρατεταμένα τη φωτογραφία, το αρχείο ή το επισημασμένο κείμενο που θέλετε να σύρετε σε άλλη εφαρμογή.
2. Σύρετε το αντικείμενο σε Σωστό μέρος V αυτή η αίτησηή άλλο που έχετε ανοίξει σε Slide Over ή Split View και απελευθερώστε.
Πώς να σύρετε και να αποθέσετε πολλές φωτογραφίες ή αρχεία ταυτόχρονα
1. Αγγίξτε παρατεταμένα μία από τις φωτογραφίες ή τα αρχεία που θέλετε να σύρετε.
2. Ενώ σύρετε το τρέχον στοιχείο, πατήστε μια άλλη φωτογραφία ή αρχείο που θέλετε επίσης να σύρετε. Κάντε το ξανά με όσα στοιχεία θέλετε να μετακινήσετε.
3. Σύρετε όλα τα επιλεγμένα αντικείμενα στην καθορισμένη θέση σε μια άλλη εφαρμογή που έχετε ανοίξει σε Slide Over ή Split View και αφήστε τα.
Πώς να σύρετε κείμενο από μια εφαρμογή σε άλλη
1. Πατήστε παρατεταμένα στο τμήμα του κειμένου που θέλετε να σύρετε για να το επιλέξετε.
2. Χρησιμοποιήστε τα σημεία επιλογής για να επισημάνετε το υπόλοιπο κείμενο που θέλετε να σύρετε.
3. Πατήστε παρατεταμένα το επιλεγμένο κείμενο.
4. Σύρετε το κείμενο στην εφαρμογή όπου θέλετε να το τοποθετήσετε και αφήστε το.
Πώς να αλλάξετε τη θέση των εικονιδίων πολλών εφαρμογών ταυτόχρονα χρησιμοποιώντας το "Drag and Drop"
Ενώ οι περισσότερες λειτουργίες μεταφοράς και απόθεσης iOS λειτουργούν μόνο στο iPad, αυτό το τέχνασμα λειτουργεί στην πραγματικότητα τόσο στο iPhone όσο και στο iPad. Αυτό σας επιτρέπει να οργανώσετε τη θέση των εφαρμογών στην αρχική οθόνη χρησιμοποιώντας « Drag and Drop» αντί να τα μετακινήσετε ένα προς ένα.
1. Αγγίξτε παρατεταμένα το εικονίδιο για την εφαρμογή που θέλετε να επανατοποθετήσετε στην αρχική οθόνη.
2. Αφή πρόσθετες εφαρμογές, το οποίο επίσης πρέπει να μετακινηθεί.
3. Σύρετε αυτές τις εφαρμογές στη σελίδα ή το φάκελο όπου θέλετε να βρίσκονται και αποθέστε τις.
Εδώ και πολύ καιρό, υπάρχουν λειτουργίες JavaScript που μας επιτρέπουν να δημιουργήσουμε διασυνδέσεις μεταφοράς και απόθεσης. Αλλά καμία από αυτές τις υλοποιήσεις δεν είναι εγγενής στο πρόγραμμα περιήγησης. Η HTML5 έχει τον δικό της τρόπο δημιουργίας διεπαφών μεταφοράς και απόθεσης (με λίγη βοήθεια από το JavaScript). Σε αυτό το άρθρο, θα σας πούμε πώς μπορεί να επιτευχθεί αυτό...
Υποστήριξη προγράμματος περιήγησης
Το HTML5 drag & drop υποστηρίζεται αυτήν τη στιγμή από όλα τα μεγάλα προγράμματα περιήγησης για επιτραπέζιους υπολογιστές (συμπεριλαμβανομένου του IE (ακόμη και του IE 5.5 έχει μερική υποστήριξη)), αλλά δεν υποστηρίζεται από κανένα από τα δημοφιλή προγράμματα περιήγησης για κινητά.
Σύρετε&απόθεση συμβάντων
Σε κάθε στάδιο της μεταφοράς και απόθεσης, ενεργοποιούνται διάφορα συμβάντα για να ενημερώσει το πρόγραμμα περιήγησης ποιον κώδικα JavaScript να εκτελέσει. Λίστα εκδηλώσεων:
- dragStart: ενεργοποιείται όταν ο χρήστης αρχίζει να σύρει στοιχεία.
- dragEnter: ενεργοποιείται όταν το στοιχείο που σύρεται σύρεται για πρώτη φορά πάνω από το στοιχείο προορισμού.
- dragOver: ενεργοποιείται όταν το ποντίκι μετακινείται πάνω από ένα στοιχείο ενώ η μεταφορά είναι σε εξέλιξη.
- dragLeave: ενεργοποιείται εάν ο δρομέας του χρήστη εγκαταλείψει το στοιχείο κατά τη μεταφορά.
- drag: ενεργοποιείται κάθε φορά που μετακινούμε το ποντίκι ενώ σέρνουμε το στοιχείο μας.
- drop: ενεργοποιείται όταν εκτελείται η πραγματική πτώση.
- dragEnd: ενεργοποιείται όταν ο χρήστης αφήνει το κουμπί του ποντικιού ενώ σέρνει ένα αντικείμενο.
Με όλα αυτά τα προγράμματα ακρόασης συμβάντων, έχετε πολύ έλεγχο στον τρόπο λειτουργίας της διεπαφής.
Αντικείμενο μεταφοράς δεδομένων
Εδώ συμβαίνει όλη η μαγεία drag&drop. Αυτό το αντικείμενο περιέχει τα δεδομένα που υποβλήθηκαν από τη λειτουργία μεταφοράς. Τα δεδομένα μπορούν να οριστούν και να ανακτηθούν διαφορετικοί τρόποι, οι σημαντικότερες από τις οποίες είναι:
- dataTransfer.effectAllowed=value: επιστρέφει τους επιτρεπόμενους τύπους ενεργειών, πιθανές τιμές: κανένα, αντιγραφή, αντιγραφήΣύνδεσμος, αντιγραφήΜετακίνηση, σύνδεσμος, σύνδεσμος Μετακίνηση, μετακίνηση, όλα και χωρίς αρχικοποίηση.
- dataTransfer.setData(μορφή, δεδομένα): Προσθέτει συγκεκριμένα δεδομένα και μορφή.
- dataTransfer.clearData(format): Διαγράφει όλα τα δεδομένα για μια συγκεκριμένη μορφή.
- dataTransfer.setDragImage(στοιχείο, x, y): ορίζει την εικόνα που θέλετε να σύρετε, οι τιμές x και y υποδεικνύουν πού πρέπει να βρίσκεται ο δρομέας του ποντικιού (0, 0 θα τον τοποθετήσει επάνω αριστερά).
- data = dataTransfer.getData(format) : Όπως υποδηλώνει το όνομα, επιστρέφει δεδομένα για μια συγκεκριμένη μορφή.
Δημιουργία παραδείγματος μεταφοράς και απόθεσης
Τώρα θα αρχίσουμε να δημιουργούμε ένα απλό παράδειγμα μεταφοράς και απόθεσης. Όπως μπορείτε να δείτε, έχουμε δύο μικρά div και ένα μεγάλο, μπορούμε να σύρουμε τα μικρά div μέσα στο μεγάλο και ακόμη και να τα μετακινήσουμε πίσω.
Σύροντας ένα αντικείμενο
Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δημιουργήσουμε το HTML. Κάνουμε τα divs dragable με το χαρακτηριστικό dragable:
Μόλις γίνει αυτό, πρέπει να ορίσουμε μια συνάρτηση JavaScript που θα ενεργοποιηθεί μόλις αρχίσουμε να μετακινούμε αυτό το στοιχείο:
Συνάρτηση dragStart(ev) ( ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ; επιστροφή αληθινή;)
Σε αυτόν τον κωδικό, πρώτα δηλώνουμε τι είδους εφέ επιτρέπουμε στη λειτουργία και ρυθμίζουμε να κινείται. Στη δεύτερη γραμμή, ορίζουμε τα δεδομένα να λειτουργούν, όπου το κείμενο θα είναι Κείμενο και η τιμή θα είναι το αναγνωριστικό του στοιχείου που σύρουμε. Μετά από αυτό, χρησιμοποιούμε τη μέθοδο setDragImage, η οποία θα ορίσει τι θα σύρουμε και στη συνέχεια πού θα βρίσκεται ο δρομέας κατά τη διάρκεια της μεταφοράς και επειδή οι κύβοι είναι 200 επί 200 pixel, το τοποθετήσαμε στο κέντρο. Στο τέλος, επιστρέφουμε επιστροφή αληθινός.
Ρίξτε αντικείμενο
Για να δεχτεί ένα στοιχείο μια πτώση, πρέπει να ακούσει 3 διαφορετικά συμβάντα: dragEnter, dragOver και το συμβάν απόθεσης. Ας προσθέσουμε λοιπόν αυτό στο HTML5 div μας με μεγάλο ID:
συνάρτηση dragEnter(ev) ( ev.preventDefault(); return true; ) συνάρτηση dragOver(ev) ( ev.preventDefault(); )
Στην πρώτη συνάρτηση, ορίζουμε τι θα συμβεί όταν το στοιχείο που σύρουμε φτάσει στο επιθυμητό στοιχείο όπου θα πρέπει να συμβεί η πτώση, στην περίπτωση αυτή αποτρέπουμε μόνο την προεπιλεγμένη συμπεριφορά του προγράμματος περιήγησης. Στη συνέχεια, στη συνάρτηση dragOver, απλώς δεν επιτρέπουμε την πτώση από προεπιλογή.
Στο επόμενο μέρος, ορίζουμε μια συνάρτηση για το πότε ένα στοιχείο "πεταχτεί" στον επιθυμητό στόχο:
Συνάρτηση dragDrop(ev) ( var data = ev.dataTransfer.getData("Κείμενο"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; )
Σε αυτό το τελευταίο μέρος, ορίζουμε πρώτα τη μεταβλητή δεδομένων όπου λαμβάνουμε όλα τα δεδομένα που είναι διαθέσιμα μορφή κειμένου, και στη συνέχεια προσθέτουμε δεδομένα στο div όπου θέλουμε να ρίξουμε το στοιχείο.
Κάντε το τμήμα πτώσης στόχο
Η επίδειξη δείχνει ότι δύο div μπορούν να επαναφερθούν στη θέση τους. Ευτυχώς, η προσθήκη ενός άλλου στόχου πτώσης είναι πολύ πιο εύκολη από ό,τι νομίζετε. Επειδή έχουμε ήδη αυτές τις λειτουργίες και το μόνο που χρειάζεται να κάνουμε είναι να προσθέσουμε προγράμματα ακρόασης συμβάντων:
Και αυτό είναι το μόνο που χρειάζεται για να επιτραπεί η επαναφορά του div στη θέση του.
Υπάρχουν πολλές εφαρμογές μεταφοράς και απόθεσης που έχουν κατασκευαστεί με χρησιμοποιώντας JavaScriptβιβλιοθήκες και είναι συχνά πιο εύχρηστες. Ελπίζουμε όμως ότι σε αυτό το HTML5 και Τεχνική JavaScript, θα δείτε τις μελλοντικές δυνατότητες επίλυσης των προβλημάτων σας.
HTML Σύρετε και αποθέστεΟι διεπαφές επιτρέπουν στις εφαρμογές να χρησιμοποιούν λειτουργίες μεταφοράς και απόθεσης σε προγράμματα περιήγησης.Ο χρήστης μπορεί να επιλέξει σύρσιμοστοιχεία με ένα ποντίκι, σύρετε αυτά τα στοιχεία στο α πτωτικόστοιχείο και αφήστε τα αφήνοντας το κουμπί του ποντικιού. Μια ημιδιαφανής αναπαράσταση του σύρσιμοστοιχεία ακολουθεί τον δείκτη κατά τη λειτουργία σύρματος.
Για ιστοτόπους, επεκτάσεις και εφαρμογές XUL, μπορείςπροσαρμόστε ποια στοιχεία μπορούν να γίνουν σύρσιμο, το είδος της ανατροφοδότησης το σύρσιμοστοιχεία παράγουν, και το πτωτικόστοιχεία.
Αυτή η επισκόπηση του HTML Drag and Drop περιλαμβάνει μια περιγραφή των διεπαφών, βασικά βήματα για την προσθήκη υποστήριξης μεταφοράς και απόθεσης σε μια εφαρμογή και μια σύνοψη διαλειτουργικότητας των διεπαφών.
Σύρετε συμβάντα
| Εκδήλωση | On Event Handler | Φωτιές όταν… |
|---|---|---|
| σέρνω | ondrag | …ένα σύρθηκε αντικείμενο(επιλογή στοιχείου ή κειμένου) σύρεται. |
| dragend | ondragend | …μια λειτουργία μεταφοράς τελειώνει (όπως η απελευθέρωση ενός κουμπιού του ποντικιού ή το πάτημα του πλήκτρου Esc, ανατρέξτε στην ενότητα Ολοκλήρωση μεταφοράς .) |
| dragenter | ondragenter | …ένα στοιχείο που έχει συρθεί εισάγει έναν έγκυρο στόχο απόθεσης. (Δείτε Καθορισμός στόχων πτώσης .) |
| dragexit | ondragexit | …ένα στοιχείο δεν είναι πλέον ο άμεσος στόχος επιλογής της λειτουργίας μεταφοράς. |
| σέρνεται | ondragleave | …ένα στοιχείο που σύρεται αφήνει έναν έγκυρο στόχο πτώσης. |
| ντραγκόβερ | ondragover | …ένα στοιχείο που σύρεται σύρεται πάνω από έναν έγκυρο στόχο απόθεσης, κάθε μερικές εκατοντάδες χιλιοστά του δευτερολέπτου. |
| dragstart | ondragstart | …ο χρήστης αρχίζει να σύρει ένα αντικείμενο. (Δείτε Έναρξη λειτουργίας μεταφοράς .) |
| πτώση | πτώση | …ένα στοιχείο απορρίπτεται σε έναν έγκυρο στόχο πτώσης. (Δείτε Εκτέλεση πτώσης.) |
Σημείωση:Ούτε τα συμβάντα dragstart ούτε dragend ενεργοποιούνται κατά τη μεταφορά ενός αρχείου στο πρόγραμμα περιήγησης από το λειτουργικό σύστημα.
Διεπαφές
Τα βασικά
Αυτή η ενότητα είναι μια σύνοψη των βασικών βημάτων για την προσθήκη λειτουργικότητας μεταφοράς και απόθεσης σε μια εφαρμογή.
προσδιορίστε τι είναι σύρσιμο
Δημιουργία στοιχείου σύρσιμοαπαιτεί την προσθήκη του χαρακτηριστικού dragable και του παγκόσμιου χειριστή συμβάντων ondragstart, όπως φαίνεται στο ακόλουθο δείγμα κώδικα:
Αυτό το στοιχείο μπορεί να συρθεί.
Για περισσότερες πληροφορίες, δείτε:
χειριστείτε την πτώση αποτέλεσμα
Ο χειριστής για το συμβάν απόθεσης είναι ελεύθερος να επεξεργάζεται τα δεδομένα μεταφοράς με τρόπο συγκεκριμένο για την εφαρμογή.
Συνήθως, μια εφαρμογή χρησιμοποιεί τη μέθοδο getData() για να ανακτήσει στοιχεία μεταφοράς και στη συνέχεια να τα επεξεργαστεί ανάλογα. Επιπλέον, η σημασιολογία της εφαρμογής μπορεί να διαφέρει ανάλογα με την τιμή του
Οι τεχνικές μεταφοράς και απόθεσης έχουν εξελιχθεί εδώ και πολλά χρόνια. Δεν αποτελεί έκπληξη, με την αύξηση του αριθμού των προγραμματιστών που αναπτύσσουν πρόσθετα με ανοιχτό πηγαίος κώδικας(π.χ. για το jQuery) οι παλιές μέθοδοι αναβιώνουν. Η βιβλιοθήκη JavaScript είναι εξαιρετικά προσαρμόσιμη και προσφέρει πολλές βελτιώσεις σε αυτήν την εποχή της τεχνολογίας Ιστού.
Σε αυτό το σεμινάριο, θα φτιάξουμε ένα σενάριο που μπορούμε να χρησιμοποιήσουμε για να δημιουργήσουμε δυναμικά ορθογώνια μεταφοράς και απόθεσης στον ιστότοπό μας. Η διαδικασία ελέγχεται από το jQuery. Τέτοια σενάρια εξοικονομούν χρόνο παρέχοντας έτοιμη λειτουργικότητα! Και η βιβλιοθήκη μεταφοράς και απόθεσης μπορεί να χρησιμοποιηθεί σε άλλα έργα.
Ετοιμάζουμε περιεχόμενο
Πρώτα απ 'όλα, θα ετοιμάσουμε μια μικρή ιστοσελίδα για το έργο. Στο φάκελο του έργου, πρέπει να δημιουργήσετε δύο καταλόγους με αξιοσημείωτα ονόματα "js"Και "css"και ένα κενό αρχείο index.html . Ο κώδικας θα είναι πολύ απλός, ώστε να υπάρχει μια σαφής ιδέα για την εργασία και υπάρχει ένα σημείο για περαιτέρω ανάπτυξη.
Παρακάτω είναι ο κωδικός μας αρχείο HTML. Στο κεφάλαιο κεφάλιπεριλαμβάνουμε 3 σενάρια. Το κύριο σενάριο jQuery θα φορτωθεί από τον διακομιστή Κώδικα Google. Περιλαμβάνεται επίσης το αρχείο style.css, το οποίο περιέχει τις κύριες ιδιότητες για τη διαμόρφωση εμφάνισητο έγγραφό μας.
σύρε με
Μπορεί να με σύρουν κι εγώ
P.S. Μπορείτε να με ρίξετε οπουδήποτε!