Xem mã nguồn của Kéo và thả

[[Tập tin:Drag_and_drop_example.gif|nhỏ|320x320px| Một [[hình ảnh]] được kéo vào biểu tượng trình duyệt web, làm cho hình ảnh được mở trong [[trình duyệt web]]. ]]
Trong [[Giao diện đồ họa người dùng|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 (điện toán)|người dùng]] chọn một đối tượng ảo bằng cách "nắm lấy" nó và [[Cử chỉ thiết bị trỏ|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 [[Trừu tượng và cụ thể|đố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.<ref>Jakob Nielsen, "Top-10 Application-Design Mistakes," http://www.useit.com/alertbox/application-mistakes.html (ngày 19 tháng 2 năm 2008).</ref>

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

* Di chuyển [[Con trỏ (giao diện người dùng)|con trỏ]] đến đối tượng 
* Nhấn và giữ nút trên [[Chuột (máy tính)|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.<ref>{{Chú thích hội thảo|author=Buxton, W.|title=Chunking and Phrasing and the Design of Human-Computer Dialogues|book-title=Proceedings of the IFIP World Computer Congress|year=1986|pages=475–480|url=http://www.billbuxton.com/chunking.html|archiveurl=https://web.archive.org/web/20040607162853/http://www.billbuxton.com/chunking.html|archivedate=ngày 7 tháng 6 năm 2004}}</ref> 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 (giao diện người dùng)|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 [[MacOS|Mac OS X]] với sự ra đời của [[Exposé (Mac OS X)|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 128K|Macintosh nguyên bản]] để thao tác các tệp (ví dụ: sao chép chúng giữa các đĩa<ref>{{Chú thích web|url=http://www.folklore.org/StoryView.py?project=Macintosh&story=Disk_Swappers_Elbow.txt&topic=Technical&sortOrder=Sort%20by%20Date&detail=medium&showcomments=1|tựa đề=Disk Swapper's Elbow|nhà xuất bản=folklore.org}}</ref> hoặc thư mục.<ref>{{Chú thích web|url=http://www.folklore.org/StoryView.py?project=Macintosh&story=The_Grand_Unified_Model_The_Finder.txt|tựa đề=The Grand Unified Model (2): The Finder|nhà xuất bản=folklore.org}}</ref>). 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|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 [[Nút chuộ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 ==
[[Vỏ nơi làm việc|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|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 [[Đa nền tả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ả.<ref>{{Chú thích web|url=http://www.w3.org/TR/2012/WD-html5-20120329/|tựa đề=HTML5 W3C Working Draft|nhà xuất bản=w3.org}}</ref> 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 [[Safari|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 (hệ điều hành)|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]].<ref>{{Chú thích báo|url=https://www.imore.com/ipad-drag-and-drop-multitasking-and-split-view-ios-11-everything-you-need-know|title=iPad Drag and Drop, Multitasking, and Split View in iOS 11: Everything you need to know!|work=iMore|accessdate = ngày 10 tháng 10 năm 2017}}</ref> 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.<ref>{{Chú thích web|url=https://www.theverge.com/2017/6/7/15752620/iphone-ios-11-drag-and-drop-apple-wwdc-2017|tựa đề=The iPhone is also getting drag and drop with iOS 11|tác giả=Vincent|tên=James|ngày=2017-06-07|website=The Verge|ngày truy cập=2017-06-23}}</ref>

== 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]],<ref>{{Chú thích web|url=https://sgd.cs.colorado.edu/wiki/images/2/21/20YearsofBlockProgramingLessonsLearned_published.pdf|tựa đề=Moving Beyond Syntax: Lessons from 20 Years of Blocks Programing in AgentSheets|website=Journal of Visual Languages and Sentient Systems|url lưu trữ=https://web.archive.org/web/20190428121123/https://sgd.cs.colorado.edu/wiki/images/2/21/20YearsofBlockProgramingLessonsLearned_published.pdf|ngày lưu trữ=ngày 28 tháng 4 năm 2019|ngày truy cập=ngày 29 tháng 11 năm 2018}}</ref> 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 (phần mềm)|Blender]].<ref>{{Chú thích web|url=http://wiki.blender.org/index.php/Doc:2.6/Manual/Materials/Nodes|tựa đề=Render – Blender Reference Manual|website=blender.org|url lưu trữ=https://web.archive.org/web/20150323033003/http://wiki.blender.org/index.php/Doc:2.6/Manual/Materials/Nodes|ngày lưu trữ=ngày 23 tháng 3 năm 2015|ngày truy cập=ngày 24 tháng 1 năm 2014}}</ref> Kéo và thả cũng có trong một số [[game engine]], bao gồm [[Unreal Engine]], [[GameMaker Studio]], [[Xây dựng 2|Construct 2]] và phần mở rộng [[Unity (phần mềm làm game)|Unity (game engine)]].

== Ví dụ ==
Một ví dụ phổ biến là kéo biểu tượng trên [[Môi trường desktop|màn hình]] ảo vào [[Biểu tượng (máy tính)|biểu tượng]] [[thùng rác]] đặc biệt để xóa [[Tập tin|tệp]].

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

* Kéo [[Tập tin|tệp]] dữ liệu vào [[Biểu tượng (máy tính)|biểu tượng]] hoặc cửa sổ [[Chương trình máy tính|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 [[Tập tin|tệ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 [[Thành tố điều khiển đồ họa|các widget]] trong [[Giao diện đồ họa người dùng|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 (phần mềm)|Blender]] để thiết kế bộ tạo bóng và vật liệu.

== Xem thêm ==

* [[Cử chỉ thiết bị trỏ|Cử chỉ chuột]] 
* [[Trỏ và nhấp]] 
* [[Snap (đồ họa máy tính)]]

== Tham khảo ==
{{Tham khảo}}

[[Thể loại:Kỹ thuật giao diện người dùng]]