Ví dụ và cách sử dụng thuộc tính ondragleave trong HTML.

Sự kiện ondragleave

Posted by: admin in Thư viện sự kiện HTML 0

« Thuộc tính sự kiện trong HTML

<!DOCTYPE HTML>

<html>

<head>

<style>

.droptarget {

float: left;

width: 100px;

height: 35px;

margin: 15px;

margin-right: 100px;

padding: 10px;

border: 1px solid #aaaaaa;

}

</style>

</head>

<body>

<p>Kéo thả nội dung dưới đây qua lại giữa 2 khung:</p>

</div>

<p style="clear:both;"><strong>Lưu ý:</strong> các sự kiện kéo thả không hỗ trợ trong Internet Explorer 8 trở về trước và Safari 5.1 trở về trước.</p>

function dragStart(event) {

event.dataTransfer.setData("Text", event.target.id);

}

function dragEnter(event) {

if ( event.target.className == "droptarget" ) {

event.target.style.border = "3px dotted red";

document.getElementById("demo").innerHTML = "Đối tượng đã vào vùng thả";

}

function dragLeave(event) {

if ( event.target.className == "droptarget" ) {

event.target.style.border = "";

document.getElementById("demo").innerHTML = "Đối tượng đã ra khỏi vùng thả";

}

function allowDrop(event) {

event.preventDefault();

}

function drop(event) {

event.preventDefault();

var data = event.dataTransfer.getData("Text");

event.target.appendChild(document.getElementById(data));

}

</script>

</body>

</html>

Demo

Định nghĩa và cách sử dụng

Thuộc tính ondragleave được kích hoạt khi đối tượng được kéo ra khỏi vùng thả hợp lệ.

Sự kiện ondragenter và ondragleave có thể giúp người dùng biết nội dung đang kéo đã vào trong hay ra ngoài vùng được phép thả. Bạn có thể làm việc này bằng nhiều cách, ví dụ: thay đổi màu nền khi nội dung được kéo vào vùng thả và bỏ màu khi nội dung ra khỏi vùng thả.

Kéo và thả là những tính năng rất phổ biến trong HTML5. Để tìm hiểu thêm, bạn có thể xem bài Kéo-Thả trong HTML5.

Lưu ý: Để một thẻ có thể kéo được, bạn phải sử dụng thuộc tính draggable trong HTML5.

Mẹo: Liên kết và ảnh là những thẻ mặc định có thể kéo mà không cần thêm thuộc tính draggable.

Dưới đây là những sự kiện được sử dụng và có thể xảy ra trong các giai đoạn khác nhau của hành động kéo-thả:

– Sự kiện được kích hoạt trên thẻ có thuộc tính draggable (thẻ nguồn):

ondragstart – kích hoạt khi người dùng bắt đầu kéo thẻ
ondrag – kích hoạt khi thẻ đang được kéo
ondragend – kích hoạt khi người dùng thả thẻ ra

– Kích hoạt trên thẻ được thả vào:

ondragenter – kích hoạt khi thẻ đang được kéo di chuyển vào trong khu vực thả
ondragover – kích hoạt khi thẻ đang được kéo di chuyển trên khu vực thả
ondragleave – kích hoạt khi thẻ đang được kéo di chuyển ra ngoài khu vực thả
ondrop – kích hoạt khi thẻ được thả vào trong

Lưu ý: Khi kéo thẻ, sự kiện ondrag được kích hoạt sau mỗi 350 milli giây (1.000 mili giây = 1 giây).

Trình duyệt hỗ trợ

Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính
ondragleave	4.0	3.5	9.0	6.0	12.0

Khác biệt giữa HTML 4.01 và HTML5

ondragleave là sự kiện mới trong HTML5.

Cú pháp

1	<element ondragleave="script">

Giá trị thuộc tính

Giá trị	Miêu tả
script	Chạy script khi thuộc tính được kích hoạt

Chi tiết

Thuộc tính được sử dụng trong tất cả các thẻ của HTML.

WebVN Cộng đồng web Việt Nam