Συνέδρασις ondrag

Δεδομένα DOM Ενεργειών DragEvent

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

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

Το drag and drop είναι μια πολύ συχνή λειτουργία του HTML5. Είναι όταν συλλαμβάνετε ένα αντικείμενο και το μετακινείτε σε διαφορετική θέση. Για να μάθετε περισσότερα, διαβάστε τα άρθρα μας για HTML5 ΣύρραξηHTML tutorial.

Σημείωση:Για να κάνετε το στοιχείο μεταφερόμενο, χρησιμοποιήστε το Αtribούτο HTML5 draggable。

Συμβουλή:By default, links and images are draggable and do not require the draggable attribute.

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

Συμβάντα που εκτυπώνονται στο στόχο μεταφοράς (πηγή στοιχείου):

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

Συμβάντα που εκτυπώνονται στο στόχο τοποθέτησης:

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

Σημείωση:Όταν μετακινήσεις το στοιχείο, το συμβάν ondrag εκτυπώνεται κάθε 350 χιλιοστόδευτερόλεπτο.

Παράδειγμα

Όταν μετακινήσεις το στοιχείο <p>, εκτελείται το JavaScript:

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

Δοκιμάστε Απ' Εκείνους

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

Γραμματική

Στο HTML:

<element ondrag="myScript">

Δοκιμάστε Απ' Εκείνους

Στο JavaScript:

object.ondrag = function(){myScript};

Δοκιμάστε Απ' Εκείνους

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

object.addEventListener("drag", myScript);

Δοκιμάστε Απ' Εκείνους

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

技术细节

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

浏览器支持

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

事件 Chrome IE Firefox Safari Opera
ondrag 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:Ατрибούτο draggable HTML

Δεδομένα DOM Ενεργειών DragEvent