HTML DOM DragEvent

HTML DOM DragEvent là một loại sự kiện được thực thi bất cứ khi nào văn bản đã chọn được kéo và thả. Sự kiện này đã được giới thiệu trong HTML5.

Thuộc tính

Sau đây là thuộc tính cho HTML DOM DragEvent -

Thuộc tính	Mô tả
dataTransfer	Để trả về dữ liệu người dùng đang kéo hoặc thả.

Cú pháp

Sau đây là cú pháp cho DragEvent -

Object.DragEventType= function_name;

Ở đây, function_name là hàm mà chúng ta muốn thực thi trên sự kiện đang được thực thi.

Sự kiện

Sau đây là các loại sự kiện thuộc đối tượng DragEvent -

Sự kiện	Mô tả
ondrag	Xảy ra khi một phần tử đang được kéo.
ondragend	Xảy ra khi phần tử đã được người dùng kéo xong.
ondragenter	Xảy ra khi phần tử đi vào mục tiêu thả sau khi được kéo.
ondragleave	Xảy ra khi phần tử rời khỏi mục tiêu thả trong khi được kéo.
ondragover	Xảy ra khi phần tử vượt quá mục tiêu thả trong khi được kéo.
ondragstart	Xảy ra khi người dùng bắt đầu kéo một phần tử.
ondrop	Xảy ra khi phần tử được thả vào mục tiêu thả sau khi được kéo.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
   .DivDrop {
      float: left;
      width: 100px;
      height: 40px;
      margin:10px;
      border: 1px solid blue;
      background-color:lightgreen;
      font-weight:bold;
   }
</style>
</head>
<body>
<h2>DragEvent example</h2>
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>
<p id="Sample" style="clear:both"></p>
<script>
   document.ondragstart = function(event) {
      event.dataTransfer.setData("Text", "spanDrag");
      document.getElementById("spanDrag").innerText="drag Text";
      document.getElementById("spanDrag").style.backgroundColor="lightgreen";
   };
   document.ondrag = function(event) {
      document.getElementById("Sample").innerHTML = "Span element is being dragged";
   };
   document.ondragover = function(event) {
      event.preventDefault();
   };
   document.ondrop = function(event) {
      event.preventDefault();
      if(event.target.className=="DivDrop"){
         var txt = event.dataTransfer.getData("Text");
         event.target.appendChild(document.getElementById(txt));
         document.getElementById(txt).innerText="Dragged Text";
         document.getElementById(txt).style.backgroundColor="lightyellow";
         document.getElementById("Sample").innerHTML = "The span element is dropped";
      }
   };
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM DragEvent

Khi kéo "Kéo cái này!" Text. Nó sẽ chuyển thành “drag Text”.

HTML DOM DragEvent

Khi thả "kéo Văn bản" trong div thứ hai -

HTML DOM DragEvent

Trong ví dụ trên -

Đầu tiên, chúng tôi đã tạo hai phần tử div có cùng tên lớp “DivDrop” sẽ cho phép chúng tôi sử dụng một kiểu css chung cho cả hai phần tử đó. Phần tử

đầu tiên chứa phần tử bên trong mà chúng ta sẽ kéo vào sau -

.DivDrop {
   float: left;
   width: 100px;
   height: 40px;
   margin:10px;
   border: 1px solid blue;
   background-color:lightgreen;
   font-weight:bold;
}
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>

Sau đó, chúng tôi đã tạo một số hàm sẽ thực thi khi một sự kiện xảy ra. Hàm đầu tiên được liên kết với sự kiện ondragstart. Sự kiện này kích hoạt khi người dùng bắt đầu kéo văn bản .. Hàm chứa phương thức setData () nhận kiểu dữ liệu kéo và dữ liệu. Ở đây loại là “văn bản” và dữ liệu là id phần tử . Bạn nên sử dụng event.target.id để tìm id được liên kết với thẻ

. Chúng tôi đã sử dụng tên cho đơn giản ở đây -

document.ondragstart = function(event) {
   event.dataTransfer.setData("Text", "spanDrag");
   document.getElementById("spanDrag").innerText="drag Text";
   document.getElementById("spanDrag").style.backgroundColor="lightgreen";
};

Hàm được liên kết với sự kiện ondrag đặt văn bản phần tử

thành “Phần tử khoảng cách đang được kéo” bằng cách sử dụng thuộc tính innerHTML của nó sau khi nhận được id của nó. Sự kiện ondrag kích hoạt khi người dùng kéo văn bản -

Document.ondrag = function(event) {
   document.getElementById("Sample").innerHTML = "Span element is being dragged";
};

Hàm được liên kết với sự kiện ondragover sử dụng phương thức event.preventDefault () để dừng hành động mặc định sẽ xảy ra trên dragover. Sự kiện dragover kích hoạt định kỳ khi phần tử đang được kéo ở trên mục tiêu dự kiến -

document.ondragover = function(event) {
   event.preventDefault();
};

Hàm được liên kết với sự kiện ondrop ngăn hành động mặc định xảy ra. Sau đó, nó sẽ kiểm tra xem mục tiêu dự kiến có phải là phần tử

thứ hai hay không. Không cần kiểm tra xem nó là thành phần nào, nó có thể đặt văn bản ở bất kỳ đâu trên trang, điều này có thể ảnh hưởng đến giao diện của trang web.

Sau đó, chúng tôi nhận được dữ liệu kéo cho kiểu “văn bản” bằng cách sử dụng phương thức getData (). Phần tử đó sẽ là trong trường hợp của chúng tôi và sau đó chúng tôi thêm phần tử làm con của div thứ hai và thay đổi văn bản bên trong, màu nền của nó để phản ánh các thay đổi -

document.ondrop = function(event) {
   event.preventDefault();
   if(event.target.className=="DivDrop"){
      var txt = event.dataTransfer.getData("Text");
      event.target.appendChild(document.getElementById(txt));
      document.getElementById(txt).innerText="Dragged Text";
      document.getElementById(txt).style.backgroundColor="lightyellow";
      document.getElementById("Sample").innerHTML = "The span element is dropped";
   }