Άγγελος ondragend

DOM συμβάντα DragEvent

Definition and Usage

The ondragend event occurs when the user finishes dragging the element or text selection.

Drag-and-drop is a very common feature in HTML5. It is when you 'grab' an object and drag it to a different location. For more information, please read our HTML5 μεταφοράHTML tutorial.

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

Tip:By default, links and images are draggable without 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 drop 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 leaves the target
  • ondrop - Occurs when the dragged element is placed on the target

Examples

Execute JavaScript when the user finishes dragging the <p> element:

<p draggable="true" ondragend="myFunction(event)">Drag me!</p>

Δοκιμάστε το Εξ ολοκλήρου

More TIY examples are below the page.

Syntax

In HTML:

<element ondragend="myScript">

Δοκιμάστε το Εξ ολοκλήρου

In JavaScript:

object.ondragend = function(){myScript};

Δοκιμάστε το Εξ ολοκλήρου

In JavaScript, use the addEventListener() method:

object.addEventListener("dragend", myScript);

Δοκιμάστε το Εξ ολοκλήρου

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

技术细节

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

浏览器支持

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

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