Το συμβάν ondrop

Δημιουργία συμβάντων DOM DragEvent

Definition and Usage

The ondrop event occurs when a draggable element or selected text is placed on a valid drop target.

Drag and drop is a very common feature in HTML5. It is when you "pick up" an object and drag it to a different location. For more information, please read our article about Η μεταφορά HTML5HTML tutorial.

Note:To make an element draggable, use the global HTML5 draggable attribute。

Tip:By default, links and images are draggable and do not require the draggable attribute.

Many events are used at different stages of the drag-and-drop operation, and may occur:

Events triggered on the draggable target (source element):

  • ondragstart - Occurs when the user starts dragging the element
  • ondrag - Occurs when the element is dragged
  • ondragend - Occurs when the user finishes dragging the element

Events triggered on the target:

  • ondragenter - Occurs when the dragged element enters the target
  • ondragover - Occurs when the dragged element is on the target
  • ondragleave - Occurs when the dragged element is removed from the target
  • ondrop - Occurs when the dragged element is placed on the target

Example

JavaScript is executed when an element is placed inside the <div> element:

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

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

More TIY examples are available at the bottom of the page.

Syntax

In HTML:

<element ondrop="myScript">

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

In JavaScript:

object.ondrop = function(){myScript};

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

In JavaScript, use the addEventListener() method:

object.addEventListener("drop", myScript);

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

Note:Internet Explorer 8 or earlier versions do not support addEventListener() 方法。

技术细节

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

浏览器支持

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

事件 Chrome IE Firefox Safari Opera
ondrop 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