Hướng dẫn làm kéo thả chuột trong c

Question

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í đó.

Nội dung chính Show

Trình duyệt hỗ trợ
Ví dụ cụ thể về việc kéo/ thả:
Phần tử Draggable
Dữ liệu gì sẽ được kéo đi – ondragstart và setData()
Dữ liệu sau khi kéo sẽ được thả ở đâu? – ondragover

Để 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.

Kéo và thả là một tính năng rất phổ biến. Bạn có thể chọn một đối tượng và di chuyển nó đến một vị trí khác.

Trong HTML5, kéo/thả là một phần của chuẩn: bất cứ phần tử nào cũng có thể thực hiện việc kéo thả.

Trình duyệt hỗ trợ

Bảng dưới đây là một số phiên bản trình duyệt đầu tiên hỗ trợ việc kéo/ thả trong HTML5

API

Kéo và Thả 4.0 9.0 3.5 6.0 12.0

Ví dụ cụ thể về việc kéo/ thả:

  
<!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>Kéo ảnh logo TimODay vào hình chữ nhật:</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">
</body>  
</html>

Trông có vẻ rất phức tạp nhưng nó thể hiện rất đầy đủ từng phần của việc kéo/ thả.

Phần tử Draggable

Đầu tiên: để một phần tử có thể kéo được cần thiết lập thuộc tính draggable của phần tử thành “True”:

<img draggable="true">

Dữ liệu gì sẽ được kéo đi – ondragstart và setData()

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

Trong ví dụ ở trên, thuộc tính ondragstart gọi hàm drag(event), hàm này quy định dữ liệu được kéo đi.

Phương thức dataTransfer.setData() cho phép chúng ta đặt kiểu dữ liệu và giá trị của thẻ đượ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ị id của thẻ là (“drag1”).

Dữ liệu sau khi kéo sẽ được thả ở đâu? – ondragover

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

Theo mặc định, dự liệu/các phần tử không thể được thả vào các thành phần khác của trang. Để cho thả xuống, chúng ta sẽ phải thay đổi mặc định của phần tử bằng cách gọi phương thức event.preventDefault() cho sự kiện ondragover:

hướng dẫn Mẹo Hay Công Nghệ Chuột