Αναγγελία ondragstart

Δραστηριότητες DOM DragEvent

Δημιουργία και χρήση

Το γεγονός ondragstart συμβαίνει όταν ο χρήστης ξεκινά να μετακινεί στοιχείο ή επιλογή κειμένου.

Η μεταφορά και απόθεση είναι μια πολύ συχνή λειτουργία στο HTML5. Είναι όταν "χτυπάτε" έναν αντικειμενο και τον μετακινείτε σε διαφορετικές θέσεις. Για να μάθετε περισσότερα, διαβάστε το άρθρο μας για το Δραστηριότητα Σύρραξης HTML5Εκμάθηση.

Σημείωση:Για να κάνετε το στοιχείο μετακινούμενο, χρησιμοποιήστε το γλωσσάρι HTML του Ιδιότητα draggable του HTML5.

Συμβουλή:Από προεπιλογή, οι σύνδεσμοι και οι εικόνες είναι μετακινούμενες, χωρίς να χρειάζεται η ιδιότητα draggable.

Σε διαφορετικές φάσεις της λειτουργίας μεταφοράς και απόθεσης, χρησιμοποιούνται πολλά γεγονότα και μπορεί να συμβούν:

Αναφέρονται γεγονότα στο στοιχείο-στόχο (πηγή στοιχείου):

  • ondragstart - Όταν ο χρήστης ξεκινά τη μετακίνηση του στοιχείου
  • ondrag - Όταν το στοιχείο μετακινείται
  • ondragend - Όταν ο χρήστης ολοκληρώσει τη μετακίνηση του στοιχείου

Αναφέρονται γεγονότα στο στόχο τοποθέτησης:

  • ondragenter - Όταν το στοιχείο που μετακινείται εισέρχεται στο στόχο τοποθέτησης
  • ondragover - Όταν το στοιχείο που μετακινείται βρίσκεται στο στόχο τοποθέτησης
  • ondragleave - Όταν το στοιχείο που μετακινείται απομακρυνθεί από το στόχο τοποθέτησης
  • ondrop - Οταν το στοιχείο που μετακινείται τοποθετηθεί στο στόχο τοποθέτησης

Παράδειγμα

Εκτελείται JavaScript όταν ο χρήστης ξεκινά να τρέχει το <p> στοιχείο:

<p draggable="true" ondragstart="myFunction(event)">Δραπέτε μου!</p>

Προσπαθήστε να το Κάνετε Μόνοι σας

Περισσότερες TIY παραδείγματα στο κάτω μέρος της σελίδας.

Γραμματική

Στην HTML:

<элемент ondragstart="myScript">

Προσπαθήστε να το Κάνετε Μόνοι σας

Στην JavaScript:

объект.ondragstart = function() {myScript};

Προσπαθήστε να το Κάνετε Μόνοι σας

Στην JavaScript, χρησιμοποιήστε τη μέθοδο addEventListener():

объект.addEventListener("dragstart", myScript);

Προσπαθήστε να το Κάνετε Μόνοι σας

Σημείωση:Η Internet Explorer 8 ή παλιότερη δεν υποστηρίζει Μέθοδος addEventListener().

Τεχνικά λεπτομέρειες

Παράπλουση: Υποστήριξη
Κανέλαση: Υποστήριξη
Τύπος γεγονότος: DragEvent
Υποστηριζόμενα HTML tags: Όλα τα στοιχεία HTML
Έκδοση DOM: Level 3 Events

Υποστήριξη περιηγητή

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

Γεγονότα Chrome IE Firefox Safari Opera
ondragstart 4.0 9.0 3.5 6.0 12.0

Περισσότερες παραδείξεις

Παρουσίαση όλων των δυνατών γεγονότων μεταφοράς:

<p draggable="true" id="dragtarget">Μεταφέρε με!</p>
<div class="droptarget">Αφήστε εδώ!</div>
<script>
/* ----------------- Είδη γεγονότων που προκαλούνται από το στόχο μεταφοράς ----------------- */
document.addEventListener("dragstart", function(event) {
  // η μέθοδος dataTransfer.setData() ορίζει τον τύπο και την τιμή των δεδομένων που μεταφέρονται
  event.dataTransfer.setData("Text", event.target.id);
  // Εκτύπωση κειμένου κατά την έναρξη της μεταφοράς του στοιχείου p
  document.getElementById("demo").innerHTML = "Άρχισε η μεταφορά του στοιχείου p.";
  // Αλλαγή της αδιαφάνειας του μεταφερόμενου στοιχείου
  event.target.style.opacity = "0.4";
});
// Αλλαγή του χρώματος του κειμένου κατά τη διάρκεια της μεταφοράς του στοιχείου p
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Εκτύπωση κειμένου και επαναφορά της αδιαφάνειας μετά την ολοκλήρωση της μεταφοράς του στοιχείου p
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Τέλος της μεταφοράς του στοιχείου p.";
  event.target.style.opacity = "1";
});
/* ----------------- Ενέργειες που προκαλούνται στην τοποθεσία στόχου ----------------- */
// Όταν το ανακλαστικό p στοιχείο εισέρχεται στο droptarget, αλλάξει το στυλ του κόμβου των ορίων
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Συνήθως, δεν είναι δυνατή η τοποθέτηση δεδομένων/στοιχείων σε άλλους κόμβους. Για να επιτρέψουμε την τοποθέτηση, πρέπει να αποτρέψουμε την προεπιλεγμένη επεξεργασία του στοιχείου
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Όταν το ανακλαστικό p στοιχείο αποχωρεί από το droptarget, επαναφέρετε το στυλ του κόμβου των ορίων
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Κατά την απόθεση - Αποτρέψτε την προεπιλεγμένη επεξεργασία του περιηγητή για τα δεδομένα (προεπιλεγμένη τοποθέτηση ανοίγει ως σύνδεσμος)
Επαναφέρετε τον χρωματισμό του κειμένου και της κόμβου (DIV) των ορίων
Αποκτήστε τα δεδομένα που μετακινούνται με τη χρήση της μεθόδου dataTransfer.getData()
Τα δεδομένα που μετακινούνται είναι το id του στοιχείου που μετακινούνται ("drag1")
Προσθέστε το στοιχείο που μετακινείται στον τοποθέτη
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
    document.getElementById("demo").style.color = "";
    event.target.style.border = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
});
</script>

Προσπαθήστε να το Κάνετε Μόνοι σας

Σχετικές Σελίδες

Εκμάθηση HTML: Δραστικότητα (drag-and-drop) του HTML5

HTML Εγχειρίδιο Αναφοράς: Η Απόκτηση Δραστικότητας (draggable) του HTML

Δραστηριότητες DOM DragEvent