<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>KÉO THẢ HÌNH ẢNH</h1>
<p>Nhấn giữ biểu tượng của XUÂN TUYẾN Education để chuyển vào các hình chữ nhật:</p>
<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<br>
<div id="div2" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)">
<img id="img1" src="https://xuantuyen.education/assets/img/logo.png" draggable="true" ondragstart="dragstartHandler(event)" width="70">
</div>
<br>
<script src="script.js"></script>
</body>
</html>
#div1, #div2 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragoverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}