Kéo thả dragable trong js và cách dùng

Bài đăng này đã không được cập nhật trong 6 năm

Drag và Drop (DnD) là khái niệm Giao diện người sử dụng (User Interface) mạnh mẽ mà giúp nó dễ dàng để sao chép, đặt lại thứ tự và xóa các item với sự trợ giúp của các cú nhấn chuột. Điều này cho phép để nhấn chuột và giữ nút chuột di chuyển qua một phần tử, kéo nó tới vị trí khác, và buông nút chuột để thả phần tử tại vị trí đó.

Để thực hiện tính năng kéo và thả này trong HTML4 truyền thống, các nhà lập trình sẽ hoặc phải sử dụng chương trình Javascript phức tạp hoặc các khung Javascript khác như jQuery.

Bây giờ HTML5 đưa ra giải pháp DnD API mà mang lại sự hỗ trợ DnD tự nhiên tới trình duyệt, làm cho nó dẽ dàng hơn để mã hóa.

HTML5 DnD được hỗ trợ bởi tất cả các trình duyệt lớn như Chrome, Firefox 3.5 và Safari, …

Các sự kiện Drag và Drop

Có một số sự kiện mà xuất hiện trong suốt các bước của hoạt động kéo và thả. Bảng dưới đây liệt kê chúng:

Event	function
dragstart	Được kích hoạt khi người sử dụng bắt đầu kéo đối tượng.
dragenter	Được kích hoạt khi con chuột được di chuyển lần đầu qua phần tử mục tiêu trong khi một hoạt động kéo diễn ra. Một Listener cho sự kiện này nên chỉ rằng có hay không một hoạt động thả được cho phép qua vị trí này. Nếu không được phép, hoặc Listener không thực hiện hoạt động nào, thì khi đó một hoạt động kéo là không được phép theo mặc định.
dragover	Được tạo khi chuột di chuyển qua một phần tử khi một hoạt động kéo đang xảy ra. Hầu hết thời gian, hoạt động sẽ là giống như sự kiện dragenter.
dragleave	Được tạo ra khi con chuột rời khỏi một phần tử trong khi một hoạt động kéo đang diễn ra. Listener nên gỡ bỏ bất cứ đánh dấu nào được sử dụng cho sự phản hồi hoạt động thả.
drag	Bắt đầu mỗi khi con chuột được di chuyển trong khi đối tượng đang được kéo.
drop	Sự kiện thả được tạo trên một phần tử, nơi mà hoạt động thả được xảy ra tại cuối của hoạt động kéo. Một Listener sẽ có trách nhiệm thu nhận dữ liệu đang được kéo và chèn nó tại vị trí thả.
dragend	Tạo ra khi người sử dụng thả nút chuột trong khi kéo một đối tượng.

Ghi chú: Ghi chú rằng chỉ các sự kiện kéo được kích hoạt; các sự kiện về chuột như mousemove không được kích hoạt trong suốt hoạt động kéo.

Sau đây là các bước để thực hiện hoạt động Drag và Drop: Bước 1: Tạo một Object Draggable Dưới đây là các bước thực hiện:

Nếu bạn muốn kéo một phần tử, bạn cần thiết lập thuộc tính draggable về true cho phần tử đó.

Thiết lập một Event Listener cho dragstart mà lưu giữ dữ liệu được kéo.

dragstart của Event Listener sẽ thiết lập các tác động được cho phép (copy, move, link, hoặc một số sự kết hợp khác).

Sau đây là ví dụ để tạo một Object Dragable:

<!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(event)">
   <p>Drag Me</p>
</div>
<div id="boxB">Dustbin</div>
</center>
</body>
</html>

Bước 2: Thả một đối tượng

Để chấp nhận một hoạt động thả, mục tiêu thả phải nghe theo ít nhất 3 sự kiện:

Sự kiện dragenter, mà được sử dụng để quyết định có hoặc không mục tiêu thả chấp nhận hoạt động thả. Nếu hoạt động thả được chấp nhận, thì khi đó sự kiện này phải bị hủy.

Sự kiện dragover, mà được sử dụng để quyết định phản hồi nào là được hiển thị tới người sử dụng. Nếu sự kiện bị hủy, thì khi đó phản hồi (đặc trưng là con trỏ chuột) được cập nhật dựa trên giá trị của thuộc tính dropEffect.

Cuối cùng, sự kiện drop, mà cho phép hoạt động thả thực sự được thực hiện.

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

<!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;
}
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>

Từ các event bạn có thể add request ajax vào ứng dụng bạn sẽ tiện dung hơn

JavaScript

Mục lục