Kéo và thả

Trong giao diện người dùng đồ họa máy tính, kéo và thả là một cử chỉ thiết bị trỏ mà người dùng chọn một đối tượng ảo bằng cách "nắm lấy" nó và kéo nó đến một vị trí khác hoặc vào một đối tượng ảo khác. Nói chung, nó có thể được sử dụng để gọi nhiều loại hành động, hoặc tạo ra nhiều kiểu liên kết khác nhau giữa hai đối tượng trừu tượng.

Như là một tính năng thì hỗ trợ kéo và thả không có trong tất cả các phần mềm, mặc dù đôi khi nó là một kỹ thuật nhanh và dễ học. Tuy nhiên, không phải lúc nào người dùng cũng rõ ràng rằng một mục có thể được kéo và thả, hoặc lệnh được thực thi bằng cách kéo và thả là gì, vì thế nó có thể làm giảm khả năng sử dụng.

Hành động 
Trình tự cơ bản liên quan đến kéo và thả là:

 Di chuyển con trỏ đến đối tượng 
 Nhấn và giữ nút trên chuột hoặc thiết bị trỏ khác để "nắm lấy" đối tượng 
 "Kéo" đối tượng đến vị trí mong muốn bằng cách di chuyển con trỏ đến vị trí này 
 "Thả" đối tượng bằng cách nhả nút

Thao tác kéo đòi hỏi nhiều nỗ lực thể chất hơn là di chuyển cùng một thiết bị trỏ mà không giữ bất kỳ nút nào. Do đó, người dùng không thể di chuyển nhanh và chính xác trong khi kéo (xem định luật Fitts). Tuy nhiên, các thao tác kéo và thả có lợi thế là kết hợp cẩn thận hai toán hạng (đối tượng để kéo và vị trí thả) thành một thao tác đơn. Kéo và thả mở rộng (như trong thiết kế đồ họa) có thể gây căng thẳng cho tay di chuột.

Một vấn đề thiết kế xuất hiện khi cùng một nút chọn và kéo các mục. Chuyển động không chính xác có thể biến việc chọn một đối tượng để đăng ký thành chuyển động kéo.

Một vấn đề khác là mục tiêu thả có thể bị ẩn dưới các vật thể khác. Người dùng sẽ phải dừng kéo, làm cho cả nguồn và đích hiển thị rồi bắt đầu lại. Trong Mac OS cổ điển, thanh menu trên cùng của màn hình được dùng làm mục tiêu "hủy kéo" phổ biến. Vấn đề này đã được xử lý trong Mac OS X với sự ra đời của Exposé.

Trong Mac OS 
Kéo và thả, được gọi là nhấp và kéo vào thời điểm đó, được sử dụng trong Macintosh nguyên bản để thao tác các tệp (ví dụ: sao chép chúng giữa các đĩa hoặc thư mục.). System 7 đã thêm khả năng mở tài liệu trong ứng dụng bằng cách thả biểu tượng tài liệu vào biểu tượng của ứng dụng.

Trong System 7.5, kéo và thả được mở rộng cho các thao tác thông thường trên khay nhớ tạm như sao chép hoặc di chuyển nội dung văn bản trong một tài liệu. Nội dung cũng có thể được kéo vào hệ thống tệp tin để tạo "tệp cắt", sau đó có thể được lưu trữ và sử dụng lại.

Trong hầu hết lịch sử của mình, Mac OS đã sử dụng một con chuột có một nút với nút bao phủ một phần lớn bề mặt trên của con chuột. Điều này có thể giảm bớt những lo lắng về công thái học của việc nhấn nút trong khi kéo.

Trong OS/2 
Workplace Shell của OS/2 sử dụng tính năng kéo và thả một cách rộng rãi bằng nút chuột phụ, để lại nút chính để chọn và nhấp. Việc sử dụng nó giống như các tính năng truy cập người dùng chung nâng cao khác giúp phân biệt các ứng dụng OS/2 gốc với các cổng độc lập với nền tảng.

Trong HTML 
Đặc tả bản nháp làm việc HTML5 bao gồm hỗ trợ kéo và thả. HTML5 hỗ trợ các loại tính năng kéo và thả khác nhau bao gồm:

 Kéo và thả văn bản và mã HTML 
 Kéo và thả các phần tử HTML 
 Kéo và thả tệp

Dựa trên hành động cần thiết, có thể sử dụng một trong các loại trên. Lưu ý rằng khi một phần tử HTML được kéo để di chuyển vị trí hiện tại của nó, ID của nó sẽ được gửi đến phần tử mẹ đích; vì vậy nó gửi một văn bản và có thể được coi là nhóm đầu tiên.

Ứng dụng e-mail trên nền web của Google, Gmail hỗ trợ kéo và thả hình ảnh và tệp đính kèm trong trình duyệt Google Chrome mới nhất và Safari của Apple (5.x). Và tìm kiếm Google hình ảnh hỗ trợ kéo và thả.

Trên màn hình cảm ứng 
Giao diện màn hình cảm ứng cũng bao gồm kéo và thả, hay chính xác hơn là nhấn và giữ rồi kéo, ví dụ như trên màn hình chính của iPhone hoặc Android.

iOS 11 triển khai tính năng kéo và thả cho phép người dùng chạm vào các mục (và chạm bằng các ngón tay khác để kéo nhiều hơn) trong một ứng dụng hoặc giữa các ứng dụng trên iPad. Trên iPhone, chức năng này chỉ khả dụng trong cùng một ứng dụng mà người dùng bắt đầu kéo.

Trong lập trình người dùng cuối 
Kéo và thả được coi là một cách tiếp cận xây dựng chương trình quan trọng trong nhiều hệ thống phát triển người dùng cuối. Trái ngược với các ngôn ngữ lập trình dựa trên văn bản truyền thống hơn, nhiều ngôn ngữ lập trình người dùng cuối dựa trên các thành phần trực quan như ô hoặc biểu tượng được người dùng cuối thao tác thông qua giao diện kéo và thả. AgentSheets, một môi trường lập trình dành cho trẻ em, đã giới thiệu khái niệm hiện đại về lập trình khối kéo và thả, cung cấp 4 khả năng đáp ứng: 1) Các khối có thể ghép được bởi người dùng cuối, 2) các khối có thể chỉnh sửa được bởi người dùng cuối, 3) các khối có thể lồng vào nhau để biểu diễn cấu trúc cây, 4) các khối được sắp xếp theo hình học để xác định cú pháp. Kéo và thả cũng có trong nhiều chương trình chỉnh sửa đổ bóng cho các công cụ đồ họa, chẳng hạn như Blender. Kéo và thả cũng có trong một số game engine, bao gồm Unreal Engine, GameMaker Studio, Construct 2 và phần mở rộng Unity (game engine).

Ví dụ 
Một ví dụ phổ biến là kéo biểu tượng trên màn hình ảo vào biểu tượng thùng rác đặc biệt để xóa .

Các ví dụ khác bao gồm:

 Kéo  dữ liệu vào biểu tượng hoặc cửa sổ chương trình để xem hoặc xử lý. Ví dụ: thả một biểu tượng đại diện cho tệp văn bản vào cửa sổ Microsoft Word có nghĩa là "Mở tài liệu này dưới dạng tài liệu mới trong Word" 
 Di chuyển hoặc sao chép  sang vị trí/thư mục mới 
 Thêm các đối tượng vào danh sách các đối tượng được xử lý 
 Sắp xếp lại các widget trong giao diện người dùng đồ họa để tùy chỉnh bố cục của chúng 
 Kéo một thuộc tính vào một đối tượng mà lệnh sẽ được áp dụng, 
 ví dụ: kéo một màu vào một đối tượng đồ họa để thay đổi màu của nó 
 Kéo một công cụ đến một vị trí canvas để áp dụng công cụ tại vị trí đó 
 Tạo một siêu liên kết từ một vị trí hoặc một từ đến một vị trí hoặc tài liệu khác 
 Hầu hết các trình soạn thảo văn bản đều cho phép kéo văn bản đã chọn từ điểm này sang điểm khác 
 Kéo một loạt các khối mã như trong Blender để thiết kế bộ tạo bóng và vật liệu.

Xem thêm 

 Cử chỉ chuột 
 Trỏ và nhấp 
 Snap (đồ họa máy tính)

Tham khảo 

Kỹ thuật giao diện người dùng