Δραστηριότητα ondragleave

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

Definition and usage

The ondragleave event occurs when a draggable element or selected text leaves the valid drop target.

ondragenter and ondragleave events can help users understand that a draggable element is about to enter or leave the drop target. For example, you can set the background color when the draggable element enters the drop target and remove the color when the element leaves the target.

Drag and drop is a very common feature in HTML5. It is when you "grasp" an object and drag it to a different position. For more information, please read our 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 drag-and-drop operations, 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 being dragged
  • ondragend - Occurs when the user completes the drag action

Events triggered on the drop target:

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

实例

Execute JavaScript when a draggable element is moved out of the drop target:

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

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

More TIY examples are at the bottom of the page.

Syntax

In HTML:

<element ondragleave="myScript">

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

In JavaScript:

object.ondragleave = function(){myScript};

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

In JavaScript, use the addEventListener() method:

object.addEventListener("dragleave", 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
ondragleave 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";
  }
});
// Παρά défaut, δεν είναι δυνατή η τοποθέτηση δεδομένων/στοιχείων σε άλλα στοιχεία. Για να επιτρέψουμε τη τοποθέτηση, πρέπει να αποτρέψουμε την προεπιλεγμένη διαχείριση του στοιχείου
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Όταν το μεταφερόμενο p στοιχείο αποχωρεί από το droptarget, ανανεώστε το στυλ του ορίου του DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Αντίδραση στο drop - αποτρέψτε την προεπιλεγμένη διαχείριση δεδομένων από τον περιηγητή (ανοίξτε δεδομένα ως σύνδεσμοι κατά την προεπιλεγμένη τοποθέτηση)
ανανεώστε το χρώμα του κειμένου της έξοδου και το χρώμα των ορίων του 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