Các phương thức trình xử lý sự kiện cho tất cả các sự kiện kéo và thả chấp nhận đối tượng Sự kiện có thuộc tính chỉ đọc được gọi là dataTransfer. Event.dataTransfer trả về đối tượng DataTransfer được liên kết với sự kiện như sau:
function EnterHandler(event) {
DataTransfer dt = event.dataTransfer;
…
} Bạn có thể thử chạy mã sau để triển khai Truyền dữ liệu đối tượng:
<!DOCTYPE HTML>
<html>
<head>
<style>
#boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; }
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script>
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to drag the purple box around.</div>
<div id = "boxA" draggable = "true" ondragstart = "return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id = "boxB">Dustbin</div>
</center>
</body>
</html>