HTML Drag and Drop API

0
45

Trong HTML, bất kỳ phần tử nào cũng có thể được Drop Drag.

Kéo và thả

Kéo và thả là một tính năng rất phổ biến. Đó là khi bạn “grab” một đối tượng và kéo nó đến một vị trí khác.

Các trình duyệt hỗ trợ

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ tính năng Drop Drag.

API ChormeFIrefox Browser Opera  
Drag and Drop4.09.03.56.012.0

Ví dụ về Drop và Drag trong HTML

Ví dụ dưới đây là một ví dụ Drop Drag đơn giản:

<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

Nó có vẻ phức tạp, nhưng chúng ta hãy xem xét tất cả các phần khác nhau của một sự kiện Drop Drag.

Tạo một phần tử có thể kéo được

Trước hết: Để làm cho một phần tử có thể kéo, hãy đặt thuộc tính có thể kéo thành true:

<img draggable="true">

Drag là gì – ondragstart và setData ()

Sau đó, chỉ định điều gì sẽ xảy ra khi phần tử được kéo.

Trong ví dụ trên, thuộc tính ondragstart gọi một hàm, kéo (sự kiện), chỉ định dữ liệu nào sẽ được kéo.

Phương thức dataTransfer.setData () đặt kiểu dữ liệu và giá trị của dữ liệu được kéo:

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

Trong trường hợp này, kiểu dữ liệu là “text” và giá trị là id của phần tử có thể kéo (“drag1”).

Thả ở đâu – ondragover

Sự kiện ondragover chỉ định nơi dữ liệu được kéo có thể được thả xuống.

Theo mặc định, không thể bỏ dữ liệu / phần tử trong các phần tử khác. Để cho phép giảm, chúng ta phải ngăn việc xử lý mặc định của phần tử.

Điều này được thực hiện bằng cách gọi phương thức event.preventDefault () cho sự kiện ondragover:

event.preventDefault()

Thực hiện thả – ondrop

Khi dữ liệu được kéo bị loại bỏ, sự kiện rơi sẽ xảy ra.

Trong ví dụ trên, thuộc tính ondrop gọi một hàm, drop (sự kiện):

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Mã giải thích:

  • Gọi PreventDefault () để ngăn trình duyệt xử lý dữ liệu mặc định (mặc định là mở dưới dạng liên kết khi thả)
  • Lấy dữ liệu được kéo bằng phương thức dataTransfer.getData (). Phương thức này sẽ trả về bất kỳ dữ liệu nào được đặt thành cùng loại trong phương thức setData ()
  • Dữ liệu được kéo là id của phần tử được kéo (“drag1”)
  • Nối phần tử đã kéo vào phần tử thả

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây