Mục lục
Hướng dẫn và ví dụ Javascript DragEvent
Xem thêm các chuyên mục:

Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.


DragEvent là một interface đại diện cho các sự kiện xẩy ra trong quá trình kéo & thả (drag & drop) một đối tượng từ nơi này tới một nơi khác. Người dùng khởi tạo một việc kéo (drag) bằng cách đặt thiết bị trỏ (pointer device) (Chẳng hạn như chuột) trên bề mặt một đối tượng, nhấn xuống (press down), và di chuyển thiết bị trỏ sang một nơi khác, sau đó nhả ra (release) khỏi thiết bị trỏ, để thả (drop) đối tượng vào vị trí mới.

DragEvent là một interface con của MouseEvent, vì vậy nó thừa kết tất cả các thuộc tính (property) và các phương thức của MouseEvent.

Dưới đây là danh sách các kiểu sự kiện sẽ xẩy ra trong quá trình kéo thả.
Event | Element Type | Description |
---|---|---|
dragstart | Dragged Element | Sự kiện xẩy ra khi người dùng bắt đầu kéo một phần tử. |
drag | Sự kiện xẩy ra khi một phần tử đang được kéo. | |
dragend | Sự kiện xẩy ra khi người dùng hoàn thành việc kéo một phần tử. | |
dragenter | Drop Target | Sự kiện xẩy ra khi phần tử được kéo đi vào một mục tiêu thả (drop target). |
dragover | Sự kiện xẩy ra khi phần tử được kéo ở trên (over) mục tiêu thả. | |
dragleave | Sự kiện xẩy ra khi phần tử được kéo rời khỏi một mục tiêu thả. | |
drop | Sự kiện xẩy ra khi phần tử được kéo, được thả (drop) xuống mục tiêu. |

Hình minh họa các sự kiện xẩy ra trong quá trình kéo thả (drag drop).
Property | Mô tả |
---|---|
dataTransfer | Trả về dữ liệu được kéo thả. |
Xem một ví dụ đơn giản:
dragevents-example.html
<!DOCTYPE html>
<html>
<head>
<title>DragEvent Example</title>
<script src="dragevents-example.js"></script>
<style>
.droptarget-div {
float: left;
width: 100px;
height: 55px;
margin: 25px 25px 5px 5px;
padding: 10px;
border: 1px solid black;
}
#dragtarget-div {
background: #eee;
padding: 5px;
}
</style>
</head>
<body>
<h3>DragEvent example</h3>
<p id="log-div">..</p>
<!-- Drop Target 1 -->
<div class="droptarget-div"
ondragenter= "ondragenterHandler(event)"
ondragover="dragoverHandler(event)"
ondrop="dropHandler(event)">
<p id="dragtarget-div"
ondragstart="dragstartHandler(event)"
ondrag="dragHandler(event)"
draggable="true">
Drag me!
</p>
</div>
<!-- Drop Target 2 -->
<div class="droptarget-div"
ondragenter= "ondragenterHandler(event)"
ondragover="dragoverHandler(event)"
ondrop="dropHandler(event)">
</div>
</body>
</html>
dragevents-example.js
// --------- Handlers for 'Dragged Element' ------------------
function dragstartHandler(evt) {
evt.dataTransfer.setData("MyDraggedElementId", evt.target.id);
}
// dragging ...
function dragHandler(evt) {
showLog("The p element is being dragged");
}
// --------- Handlers for 'Drop Target' ------------------
function ondragenterHandler() {
showLog("The p element enter drop-target");
}
// When 'over' you can 'release mouse' to 'drop'.
function dragoverHandler(evt) {
evt.preventDefault(); // Important!!
}
function dropHandler(evt) {
evt.preventDefault(); // Important!!
var elementId = evt.dataTransfer.getData("MyDraggedElementId");
evt.target.appendChild(document.getElementById(elementId));
showLog("The p element was dropped");
}
// -------------------------------------------------------
function showLog(text) {
document.getElementById("log-div").innerHTML = text;
}
-
Ví dụ, người dùng kéo các tập tin trên máy tính của họ và thả vào một phần tử <div>, bạn có thể đọc các thông tin cơ bản, và nội dung của các tập tin mà người dùng đã kéo thả vào.
Khi sự kiện drop xẩy ra, event.dataTransfer.files trả về một đối tượng FileList, đối tượng này chứa danh sách các đối tượng File.
drop-files-example.html
<!DOCTYPE html>
<html>
<head>
<title>DragEvent Example</title>
<meta charset="UTF-8">
<script src="drop-files-example.js"></script>
<style>
#drop-area {
border: 1px solid blue;
padding: 15px;
}
</style>
</head>
<body>
<h3>Drop files example</h3>
<div id="drop-area" ondragover="dragoverHandler(event)" ondrop="dropHandler(event)">
Drop files here
</div>
<output id="log-div"></output>
</body>
</html>
drop-files-example.js
function dropHandler(evt) {
evt.stopPropagation();
evt.preventDefault();
// FileList object.
var files = evt.dataTransfer.files;
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), //
'</strong> (', f.type || 'n/a', ') - ', //
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('log-div').innerHTML = '<ul>' + output.join('') + '</ul>';
}
function dragoverHandler(evt) {
evt.stopPropagation();
evt.preventDefault();
// Explicitly show this is a copy.
evt.dataTransfer.dropEffect = 'copy';
}