sự kiện ondragend
Ví dụ
Gọi hàm khi người dùng kéo xong phần tử <p>:
<p draggable="true" ondragend="myFunction(event)">Drag me!</p>
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Sự kiện ondragend
xảy ra khi người dùng kéo xong vùng chọn.
Kéo và thả là một tính năng phổ biến trong HTML. Đó là khi bạn "nắm" một vật thể và kéo nó đến một vị trí khác.
Để làm cho một phần tử có thể kéo được, hãy sử dụng Thuộc tính có thể kéo được .
Để biết thêm thông tin, hãy xem Hướng dẫn kéo và thả HTML .
Theo mặc định, các liên kết và hình ảnh có thể kéo được và không cần thuộc tính có thể kéo được.
Nhiều sự kiện xảy ra trong các giai đoạn khác nhau của thao tác kéo và thả (xem bên dưới):
Kéo sự kiện
Trên phần tử có thể kéo:
Event | Occurs When |
---|---|
ondrag | An element is being dragged |
ondragstart | The user starts to drag an element |
ondragend | The user has finished dragging an element |
Lưu ý: Trong khi kéo một phần tử, sự kiện ondrag sẽ kích hoạt cứ sau 350 mili giây.
Trên mục tiêu thả:
Sự kiện | Xảy ra khi |
---|---|
ondragenter | Phần tử được kéo đi vào mục tiêu thả |
rời khỏi | Phần tử được kéo sẽ rời khỏi mục tiêu thả |
ondragover | Phần tử được kéo nằm trên mục tiêu thả |
thả xuống | Một phần tử được kéo sẽ được thả vào mục tiêu |
Xem thêm:
Đối tượng sự kiện kéo
Thuộc tính có thể kéo được
Hướng dẫn:
Cú pháp
Trong JavaScript, sử dụng phương thức addEventListener():
object .addEventListener("dragend", myScript );
Hãy tự mình thử »Chi tiết kỹ thuật
Bong bóng: | Đúng |
---|---|
Có thể hủy: | KHÔNG |
Loại sự kiện: | KéoSự kiện |
Thẻ HTML: | Tất cả các phần tử HTML |
Phiên bản DOM: | Sự kiện cấp 3 |
Thêm ví dụ
Ví dụ
Một minh họa về TẤT CẢ các sự kiện kéo và thả có thể xảy ra:
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
// Events fired on the drag target
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
// Events fired on the drop target
// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
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>
Hãy tự mình thử »Hỗ trợ trình duyệt
ondragend
là tính năng DOM cấp 3 (2004).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt hiện đại:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 11 |