HTML5 - Kéo và thả

Kéo và thả (DnD) là khái niệm Giao diện người dùng mạnh mẽ giúp dễ dàng sao chép, sắp xếp lại và xóa các mục với sự trợ giúp của các cú nhấp chuột. Điều này cho phép người dùng nhấp và giữ nút chuột trên một phần tử, kéo phần tử đó đến vị trí khác và thả nút chuột để thả phần tử đó.

Để đạt được chức năng kéo và thả với HTML4 truyền thống, các nhà phát triển sẽ phải sử dụng lập trình JavaScript phức tạp hoặc các khung JavaScript khác như jQuery, v.v.

Giờ đây, HTML 5 đã đưa ra API Kéo và Thả (DnD) mang đến hỗ trợ DnD nguyên bản cho trình duyệt, giúp dễ dàng lập mã hơn nhiều.

HTML 5 DnD được hỗ trợ bởi tất cả các trình duyệt chính như Chrome, Firefox 3.5 và Safari 4, v.v.

Sự kiện kéo và thả

Có một số sự kiện được kích hoạt trong các giai đoạn khác nhau của thao tác kéo và thả. Những sự kiện này được liệt kê dưới đây -

Sr.No.	Sự kiện & Mô tả
1	dragstart Kích hoạt khi người dùng bắt đầu kéo đối tượng.
2	dragenter Được kích hoạt khi lần đầu tiên di chuyển chuột qua phần tử mục tiêu trong khi đang xảy ra một thao tác kéo. Người nghe cho sự kiện này sẽ cho biết liệu có được phép thả qua vị trí này hay không. Nếu không có người nghe hoặc người nghe không thực hiện thao tác nào, thì theo mặc định, việc giảm không được phép.
3	dragover Sự kiện này được kích hoạt khi chuột được di chuyển qua một phần tử khi xảy ra thao tác kéo. Phần lớn thời gian, hoạt động xảy ra trong trình lắng nghe sẽ giống như sự kiện trình soạn thảo.
4	dragleave Sự kiện này được kích hoạt khi chuột rời khỏi một phần tử trong khi đang xảy ra một thao tác kéo. Người nghe nên xóa bất kỳ điểm đánh dấu hoặc điểm chèn nào được sử dụng cho phản hồi thả.
5	drag Kích hoạt mỗi khi di chuyển chuột trong khi đối tượng đang được kéo.
6	drop Sự kiện thả được kích hoạt trên phần tử nơi xảy ra thả ở cuối thao tác kéo. Một người nghe sẽ chịu trách nhiệm truy xuất dữ liệu đang được kéo và chèn nó vào vị trí thả.
7	dragend Kích hoạt khi người dùng thả nút chuột trong khi kéo một đối tượng.

Note- Lưu ý rằng chỉ các sự kiện kéo mới được kích hoạt; chuột các sự kiện như MouseMove không bị sa thải trong một hoạt động kéo.

Đối tượng DataTransfer

Các phương pháp trình xử lý sự kiện cho tất cả các sự kiện kéo và thả chấp nhận Event đối tượng có thuộc tính chỉ đọc được gọi là dataTransfer.

Các event.dataTransfer trả lại DataTransfer đối tượng được liên kết với sự kiện như sau:

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

Các DataTransfer đối tượng chứa dữ liệu về hoạt động kéo và thả. Dữ liệu này có thể được truy xuất và đặt theo các thuộc tính khác nhau được liên kết với đối tượng DataTransfer như được giải thích bên dưới:

Sr.No.	Thuộc tính DataTransfer và mô tả của chúng
1	dataTransfer.dropEffect [ = value ] Trả về loại hoạt động hiện được chọn. Thuộc tính này có thể được đặt để thay đổi hoạt động đã chọn. Các giá trị có thể là không, sao chép, liên kết và di chuyển.
2	dataTransfer.effectAllowed [ = value ] Trả về các loại hoạt động được phép. Thuộc tính này có thể được thiết lập, để thay đổi các hoạt động được phép. Các giá trị có thể là none, copy, copyLink, copyMove, link, linkMove, move, all và uninitialized.
3	dataTransfer.types Trả về DOMStringList liệt kê các định dạng đã được đặt trong sự kiện dragstart. Ngoài ra, nếu bất kỳ tệp nào đang được kéo, thì một trong các kiểu sẽ là chuỗi "Tệp".
4	dataTransfer.clearData ( [ format ] ) Loại bỏ dữ liệu của các định dạng được chỉ định. Loại bỏ tất cả dữ liệu nếu đối số bị bỏ qua.
5	dataTransfer.setData(format, data) Thêm dữ liệu được chỉ định.
6	data = dataTransfer.getData(format) Trả về dữ liệu được chỉ định. Nếu không có dữ liệu như vậy, trả về chuỗi trống.
7	dataTransfer.files Trả về Danh sách tệp của các tệp đang được kéo, nếu có.
số 8	dataTransfer.setDragImage(element, x, y) Sử dụng phần tử đã cho để cập nhật phản hồi kéo, thay thế mọi phản hồi được chỉ định trước đó.
9	dataTransfer.addElement(element) Thêm phần tử đã cho vào danh sách các phần tử được sử dụng để hiển thị phản hồi kéo.

Quá trình kéo và thả

Sau đây là các bước cần thực hiện để thực hiện thao tác Kéo và thả -

Bước 1 - Tạo một đối tượng có thể kéo được

Dưới đây là các bước cần thực hiện -

Nếu bạn muốn kéo một phần tử, bạn cần đặt draggable gán cho true cho phần tử đó.
Đặt trình nghe sự kiện cho dragstart lưu trữ dữ liệu đang được kéo.
Người nghe sự kiện dragstart sẽ thiết lập các hiệu ứng được phép (sao chép, di chuyển, liên kết hoặc một số kết hợp).

Sau đây là ví dụ để làm cho một đối tượng có thể kéo -

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

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

Bước 2 - Bỏ đối tượng

Để chấp nhận giảm, mục tiêu giảm phải nghe ít nhất ba sự kiện.

Các dragentersự kiện được sử dụng để xác định xem mục tiêu giảm có chấp nhận việc giảm hay không. Nếu việc giảm được chấp nhận, thì sự kiện này phải bị hủy bỏ.
Các dragoversự kiện, được sử dụng để xác định phản hồi nào sẽ được hiển thị cho người dùng. Nếu sự kiện bị hủy, thì phản hồi (thường là con trỏ) được cập nhật dựa trên giá trị của thuộc tính dropEffect.
cuối cùng drop sự kiện này cho phép thực hiện việc giảm thực tế.

Sau đây là ví dụ để thả một đối tượng vào một đối tượng khác:

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

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