Kéo và thả trong HTML5- Drop and Drag

Drag và Drop (Kéo và thả)

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

Trong HTML5, kéo và thả là một phần của tiêu chuẩn, và bất kỳ yếu tố có thể kéo.

keo va tha trong html5

Hỗ trợ trình duyệt

Internet Explorer 9 +, Firefox, Opera, Chrome, và Safari hỗ trợ kéo và thả.

Lưu ý: Kéo và thả không làm việc trong Safari 5.1.2.

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

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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″>

<p> Công ty thiet ke web chuyen nghiep OSVN</p>

</body>
</html>

Nó có vẻ phức tạp, nhưng cho phép đi qua tất cả các phần khác nhau của một sự kiện kéo và thả.

Thực hiện kéo một phần tử Draggable

Trước hết: Để thực hiện kéo một phần tử, thiết lập các thuộc tính kéo là đúng(true):

<img draggable=”true”>

drag and drop

Xác định Kéo cái gì? – ondragstart và setData ()

Sau đó, xác định những gì sẽ xảy ra khi các yếu tố được kéo.

Trong ví dụ trên, thuộc tính ondragstart gọi một chức năng kéo (sự kiện), cho biết những dữ liệu được kéo.

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

function drag(ev) {
    ev.dataTransfer.setData(“Text”, ev.target.id);
}

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

Nơi để thả Drop – ondragover

Sự kiện ondragover xác định nơi mà dữ liệu có thể được kéo thả.

Theo mặc định, dữ liệu / yếu tố có thể không được thả trong các yếu tố khác. Để cho phép thả, chúng ta phải ngăn chặ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 các sự kiện ondragover:

event.preventDefault ()

Do the Drop – ondrop

Khi dữ liệu được kéo thả, một sự kiện thả xảy ra.

Trong ví dụ trên, thuộc tính ondrop gọi một chức năng, thả (sự kiện):

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData(“Text”);
    ev.target.appendChild(document.getElementById(data));
}

Giải thích:

– Gọi preventDefault () để ngăn chặn việc xử lý trình duyệt mặc định của dữ liệu (mặc định là mở như liên kết trên thả)
– Lấy dữ liệu kéo với (“Text”) phương thức dataTransfer.getData. Phương thức này sẽ trả lại bất kỳ dữ liệu đã được thiết lập để cùng loại trong phương thức setData ().
– Các dữ liệu kéo là id của phần tử kéo (“drag1”)
– Thêm các yếu tố kéo vào các yếu tố thả

Bài viết trên, Công ty thiết kế web OSVN đã giới thiệu và hướng dẫn các bạn sử dụng Drop và Drag(Kéo và thả) trong HTML5.

 

Summary
Reviewer
Vũ Văn Hoan
Review Date
Reviewed Item
Bài viết rất hay, bổ ích. Cho 5 sao nhé, hy vọng bài sắp tới
Author Rating
5

Comments

Bình luận