Thuộc tính sự kiện HTML ondragstart được kích hoạt khi người dùng bắt đầu kéo một phần tử HTML hoặc văn bản của một phần tử trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
<tagname ondragstart=”script”></tagname>
Hãy để chúng tôi xem một ví dụ về Thuộc tính sự kiện ondragstart HTML−
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
.drop-target {
display: inline-block;
width: 150px;
height: 150px;
border: 2px solid #FFF;
margin: 1rem;
vertical-align: middle;
padding: 20px;
}
.circle {
background: #db133a;
height: 40px;
width: 40px;
border-radius: 50%;
}
.show {
color: #fff;
font-size: 1.2rem;
}
</style>
</head>
<body>
<h1>HTML ondragstart Event Attribute Demo</h1>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondragend="dragFinished(event)" draggable="true" class="circle"></p>
</div>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p>Now try to drag and drop the red circle</p>
<div class="show"></div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
document.querySelector(".show").innerHTML = "Started to drag the red circle.";
}
function dragFinished(event) {
document.querySelector(".show").innerHTML = "Finished dragging the red circle.";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
event.target.appendChild(document.querySelector('.circle'));
}
</script>
</body>
</html> Đầu ra
Bây giờ, hãy thử kéo và thả vòng tròn màu đỏ giữa hai hộp để quan sát cách hoạt động của thuộc tính sự kiện ondragstart−
