Drag-and-Drop — cách kéo và thả hoạt động trong các ứng dụng di động

Drag-and-Drop là gì?

Drag-and-Drop (DnD) là một phương pháp thao tác các phần tử giao diện đồ họa, trong đó người dùng nắm một đối tượng bằng ngón tay hoặc chuột, di chuyển nó đến một vị trí khác và thả ra. Trong giao diện di động, Drag-and-Drop thường được khởi tạo bằng thao tác nhấn giữ — người dùng giữ phần tử trong 300–500 ms, sau đó hệ thống chuyển giao diện sang chế độ kéo và chuyển động của ngón tay di chuyển đối tượng đi theo.

Về lịch sử, Drag-and-Drop xuất hiện trong giao diện máy tính để bàn (Xerox Star, 1981; Macintosh, 1984) như một sự thay thế cho các lệnh sao chép/dán. Trên các nền tảng di động, hỗ trợ đầy đủ xuất hiện trong iOS 11 (2017) với UIDragInteraction và trong Android 7.0 (2016) với Multi-Window Drag-and-Drop. Trước đó, việc kéo trong các ứng dụng di động được thực hiện bằng các giải pháp tùy chỉnh thông qua bộ nhận dạng cử chỉ.

Các khái niệm chính: phiên kéo (drag session), mục kéo (drag items), xem trước kéo (drag preview — biểu diễn trực quan của đối tượng), vùng thả (drop target), đề xuất thả (drop proposal — hành động khi thả: di chuyển, sao chép, liên kết). Hệ thống quản lý phiên ở cấp hệ điều hành, cho phép kéo các đối tượng giữa các ứng dụng khác nhau (ví dụ: ảnh từ Thư viện ảnh đến Ghi chú).

Các giai đoạn của Drag-and-Drop

Drag-and-Drop được chia thành ba giai đoạn tuần tự. Giai đoạn 1 — Nắm (Bắt đầu kéo): người dùng khởi tạo cử chỉ (thường là nhấn giữ), hệ thống tạo một phiên kéo, thu thập dữ liệu của đối tượng và hiển thị bản xem trước kéo — một bản sao bán trong suốt của phần tử theo ngón tay. Trong giai đoạn này, hệ thống từ chối các cử chỉ khác (cuộn, chọn văn bản) cho đến khi hoàn tất DnD.

Giai đoạn 2 — Di chuyển (Di chuyển kéo): ngón tay di chuyển trên màn hình, bản xem trước kéo theo điểm chạm. Hệ thống liên tục xác định vùng thả dưới ngón tay và gửi các sự kiện drag-enter, drag-move và drag-exit. Vùng thả có thể phản ứng trực quan: làm nổi bật, mở rộng hoặc hiển thị một đường chèn. Giai đoạn này kéo dài từ 0,5 đến 10+ giây tùy thuộc vào độ phức tạp của nhiệm vụ.

Giai đoạn 3 — Thả (Thả): ngón tay nhấc khỏi màn hình. Hệ thống kết thúc phiên kéo và gọi callback thả trên phần tử mục tiêu. Nếu vùng thả từ chối việc thả (ví dụ: kéo tập tin vào thư mục không có quyền ghi), bản xem trước kéo sẽ hoạt ảnh trở về vị trí ban đầu (hoạt ảnh hủy). Nếu việc thả được chấp nhận, phần tử biến mất khỏi vị trí ban đầu và xuất hiện tại mục tiêu.

Kéo giữa các ứng dụng là một tính năng có sẵn trên cả hai nền tảng. iOS hỗ trợ Drag-and-Drop giữa các ứng dụng ở chế độ Split View và Slide Over (iPad). Android hỗ trợ kéo giữa các ứng dụng ở chế độ Split Screen. Dữ liệu được truyền qua UIPasteConfiguration (iOS) hoặc ClipData (Android). Nhà phát triển chỉ định các loại dữ liệu được hỗ trợ (UTI cho iOS, MIME cho Android).

Drag-and-Drop trên iOS: UIDragInteraction

UIDragInteraction là API iOS chính cho việc kéo, được thêm vào iOS 11. Để bật kéo từ một View, hãy thêm UIDragInteraction với UIDragInteractionDelegate. Ủy quyền xác định phần tử nào có thể kéo, hình thức và hành vi của chúng. Để nhận các phần tử, hãy sử dụng UIDropInteraction với UIDropInteractionDelegate, xác định liệu View có thể chấp nhận thả hay không và cách xử lý dữ liệu.

// UIDragInteraction — kéo một phần tử từ bộ sưu tập
class DragViewController: UIViewController, UIDragInteractionDelegate {

    @IBOutlet var dragSourceView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let dragInteraction = UIDragInteraction(delegate: self)
        dragSourceView.addInteraction(dragInteraction)
    }

    func dragInteraction(_ interaction: UIDragInteraction,
                          itemsForBeginning session: UIDragSession) -> [UIDragItem] {

        guard let data = Data(contentsOf: selectedFileURL) else { return [] }

        let itemProvider = NSItemProvider(object: data as NSData)
        let dragItem = UIDragItem(itemProvider: itemProvider)

        // Xem trước kéo — bản sao thu nhỏ của phần tử
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate là giao diện phản chiếu để nhận các thả. Phương thức canHandle(_:) kiểm tra xem loại dữ liệu có được hỗ trợ hay không. sessionDidUpdate(_:) cập nhật trạng thái trực quan (làm nổi bật, đường chèn). performDrop(_:) thực hiện xử lý dữ liệu cuối cùng. iOS tự động gọi UIDropProposal với loại thao tác: .move, .copy hoặc .forbidden. Loại thao tác ảnh hưởng đến hiển thị trực quan (biểu tượng + ở góc bản xem trước cho sao chép, dấu cấm cho forbidden).

Drag-and-Drop trên Android: startDragAndDrop

View.startDragAndDrop() là phương thức Android SDK để bắt đầu kéo, có sẵn từ API 24 (Android 7.0). Nó được gọi sau khi nắm phần tử (thường trong onLongClick). Các tham số: ClipData (dữ liệu), DragShadowBuilder (bóng trực quan), Object myLocalState (trạng thái cục bộ), flags. DragShadowBuilder tạo một Bitmap theo ngón tay. Hệ thống tự động quản lý hoạt ảnh và các sự kiện cảm ứng trong khi kéo.

// Drag-and-Drop phần tử RecyclerView với sắp xếp lại
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // Tạo ClipData để truyền dữ liệu
            val clipData = ClipData.newPlainText("item", items[position])

            // DragShadowBuilder tùy chỉnh với bản xem trước thu nhỏ
            val shadowBuilder = object : View.DragShadowBuilder(holder.itemView) {
                override fun onProvideShadowMetrics(shadowSize: Point, shadowTouchPoint: Point) {
                    shadowSize.set(itemView.width, itemView.height / 2)
                }
            }

            holder.itemView.startDragAndDrop(clipData, shadowBuilder, position, 0)
            true
        }
    }
}

Nhận thả trong Android được thực hiện qua View.setOnDragListener(). Trình lắng nghe nhận các sự kiện ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP và ACTION_DRAG_ENDED. Trong sự kiện ACTION_DROP, dữ liệu được trích xuất từ ClipData và hành động mục tiêu được thực hiện. Đối với RecyclerView có sắp xếp lại, ItemTouchHelper.SimpleCallback được khuyến nghị — một cơ chế tích hợp sẵn tự động xử lý nhấn giữ để nắm, hoạt ảnh di chuyển và các phương thức tiện ích onMove/onSwiped.

Các trường hợp sử dụng Drag-and-Drop

Sắp xếp lại danh sách (drag to reorder) là kịch bản DnD phổ biến nhất: người dùng kéo các mục danh sách để thay đổi thứ tự của chúng. Ví dụ: sắp xếp lại danh bạ trong mục yêu thích, sắp xếp nhiệm vụ trong các trình theo dõi (Trello, Todoist), sắp xếp lại bài hát trong danh sách phát (Spotify, Apple Music). Được thực hiện qua ItemTouchHelper trong Android hoặc UILongPressGestureRecognizer với sắp xếp lại ô trong iOS.

Trình quản lý tập tin — Drag-and-Drop để sao chép và di chuyển tập tin giữa các thư mục. iOS Files App, Android Files by Google, Dropbox — tất cả đều hỗ trợ DnD. Kéo một tập tin vào thư mục sẽ di chuyển nó vào bên trong (move), kéo khi giữ Option/Ctrl sẽ sao chép nó (copy). Vùng thả sẽ làm nổi bật trực quan khi di chuển qua, hiển thị ranh giới thư mục.

Bảng Kanban — Trello, Jira, Notion sử dụng Drag-and-Drop để di chuyển thẻ giữa các cột (To Do → In Progress → Done). Khi kéo, thẻ tách khỏi cột nguồn, theo ngón tay và khi vượt qua ranh giới của một cột khác, nó sẽ chèn vào với hoạt ảnh. iOS 11+ hỗ trợ UIDragPreview với hiệu ứng thị sai (parallax), nơi bản xem trước nghiêng nhẹ khỏi điểm chạm, tạo chiều sâu.

Các phần Springboard (iOS) — kéo các biểu tượng ứng dụng trên màn hình chính iOS. Nhấn giữ một biểu tượng sẽ kích hoạt chế độ “rung lắc” (các biểu tượng rung), sau đó người dùng có thể di chuyển các biểu tượng giữa các trang và tạo thư mục. Đây là một trong những mẫu UX DnD phức tạp nhất vì nó yêu cầu xử lý đồng thời việc kéo, hoạt ảnh rung và nhóm vào thư mục.

Khuyến nghị UX cho Drag-and-Drop

Phản hồi trực quan là cực kỳ quan trọng đối với Drag-and-Drop. Đối tượng được kéo phải thay đổi: thu nhỏ (iOS: tỷ lệ 0,8–0,9), trở nên bán trong suốt (alpha 0,7–0,8) và nâng lên trên giao diện với bóng đổ (shadow offset). Vùng thả phải phản ứng trực quan khi di chuển qua: làm nổi bật, mở rộng hoặc hiển thị đường viền. Nếu không có các tín hiệu này, người dùng không thể biết nơi họ có thể thả đối tượng.

Hoạt ảnh quay lại (hủy kéo) — nếu người dùng thả phần tử bên ngoài vùng thả hoặc trên vùng không hợp lệ, đối tượng phải hoạt ảnh trở về vị trí ban đầu. iOS UIDragInteractionDelegate cung cấp dragInteraction(_:sessionDidMove:) để theo dõi và dragInteraction(_:session:willEndWith:) cho hoạt ảnh quay lại. Android View.setOnDragListener nhận được ACTION_DRAG_ENDED, nơi có thể bắt đầu hoạt ảnh quay lại qua ValueAnimator hoặc ObjectAnimator.

Khả năng tiếp cận: người dùng bị hạn chế vận động có thể không thực hiện được cử chỉ kéo. Hãy cung cấp các lựa chọn thay thế qua các nút “Di chuyển lên/xuống” cho danh sách và trình đơn ngữ cảnh “Di chuyển đến thư mục” cho tập tin. iOS VoiceOver hỗ trợ hành động răng quay “Kéo” để di chuyển các phần tử. Android TalkBack cung cấp các hành động tùy chỉnh qua AccessibilityNodeInfo.addAction(). Nike Run Club và Apple Health sử dụng DnD để sắp xếp lại các chỉ số trên bảng điều khiển — với quyền truy cập qua các nút tiêu chuẩn.