Το συμβάν ondragenter

Είδη γεγονότων DOM DragEvent

Ορισμός και χρήση

Η αναζήτηση ondragenter προκαλείται όταν το μεταφερόμενο στοιχείο ή η επιλογή κειμένου εισέρχεται στον έγκυρο στόχο μεταφοράς.

Η αναζήτηση ondragenter και ondragleave βοηθά τους χρήστες να κατανοήσουν ότι ένα μεταφερόμενο στοιχείο πλησιάζει ή απομακρύνεται από τον στόχο μεταφοράς. Για παράδειγμα, μπορείτε να αλλάξετε το χρώμα του παρασκηνίου όταν το στοιχείο εισέρχεται στον στόχο μεταφοράς και να το αφαιρέσετε όταν το στοιχείο απομακρύνεται από τον στόχο.

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

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

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

Σε διαφορετικές φάσεις της διαδικασίας μεταφοράς-αποθήκευσης, χρησιμοποιούνται πολλές αναζητήσεις και μπορεί να προκύψουν:

Αναζητήσεις που προκαλούνται στον στόχο μεταφοράς (πηγή στοιχείου):

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

Αναζητήσεις που προκαλούνται στον στόχο μεταφοράς:

  • ondragenter - Γίνεται όταν το μεταφερόμενο στοιχείο εισέρχεται στον στόχο μεταφοράς
  • ondragover - Γίνεται όταν το μεταφερόμενο στοιχείο βρίσκεται στον στόχο μεταφοράς
  • ondragleave - Γίνεται όταν το μεταφερόμενο στοιχείο απομακρύνεται από τον στόχο μεταφοράς
  • ondrop - Γίνεται όταν το μεταφερόμενο στοιχείο τοποθετηθεί στον στόχο μεταφοράς

Παράδειγμα

Εκτελείται το JavaScript όταν ο μεταφερόμενος στοιχείο εισέρχεται στον στόχο μεταφοράς:

<div ondragenter="myFunction(event)"></div>

Δοκιμάστε το προσωπικά

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

Γραμματική

Στο HTML:

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

Δοκιμάστε το προσωπικά

Στο JavaScript:

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

Δοκιμάστε το προσωπικά

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

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

Δοκιμάστε το προσωπικά

Σημείωση:Δεν υποστηρίζει ο Internet Explorer 8 ή παλιότερες εκδόσεις addEventListener() 方法。

技术细节

冒泡： 支持
可取消： 支持
事件类型： DragEvent
支持的 HTML 标签： 所有 HTML 元素
DOM 版本： Level 3 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件 Chrome IE Firefox Safari Opera
ondragenter 4.0 9.0 3.5 6.0 12.0

更多实例

对所有可能的拖放事件的演示：

<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData()方法设置被拖拽数据的数据类型和值
  event.dataTransfer.setData("Text", event.target.id);
  // 开始拖动 p 元素时输出一些文本
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // 更改可拖动元素的不透明度
  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 = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});
/* ----------------- Σε γεγονότα που προκαλούνται στην περιοχή τοποθέτησης ----------------- */
// Όταν το μεταφερόμενο p στοιχείο εισέρχεται στο droptarget, αλλάξτε το στυλ περιγράμματος του DIV
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, ανακτήστε το στυλ περιγράμματος του DIV
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 Εκμάθηση: HTML5 μεταφοράς

HTML Εγχειρίδιο 参考手册：HTML draggable 属性

Είδη γεγονότων DOM DragEvent