Drag-and-Drop — mohiyati, mobil ilovalarda Drag and Drop

Drag-and-Drop nima?

Drag-and-Drop (DnD, sudrab tashlash) — foydalanuvchi obyektni barmoq yoki sichqoncha bilan ushlab, boshqa joyga ko‘chirib qo‘yadigan grafik interfeys elementlarini boshqarish usulidir. Mobil interfeyslarda Drag-and-Drop odatda uzoq bosish (Long Press) bilan boshlanadi — foydalanuvchi elementni 300–500 ms ushlab turadi, shundan so‘ng tizim interfeysni sudrab tashlash rejimiga o‘tkazadi va barmoq harakati obyektni o‘zi bilan olib boradi.

Tarixiy jihatdan, Drag-and-Drop ish stoli interfeyslarida (Xerox Star, 1981; Macintosh, 1984) nusxalash/joylashtirish buyruqlariga muqobil sifatida paydo bo‘ldi. Mobil platformalarda to‘liq qo‘llab-quvvatlash iOS 11 (2017) da UIDragInteraction va Android 7.0 (2016) da Multi-Window Drag-and-Drop bilan paydo bo‘ldi. Bungacha mobil ilovalarda sudrab tashlash gesture recognizers orqali maxsus yechimlar bilan amalga oshirilar edi.

Asosiy tushunchalar: drag session (sudrab tashlash sessiyasi), drag items (sudralayotgan obyektlar), drag preview (obyektning vizual ko‘rinishi), drop target (tashlash zonasi), drop proposal (tashlashdagi harakat: ko‘chirish, nusxalash, bog‘lash). Tizim sessiyani operatsion tizim darajasida boshqaradi, bu obyektlarni turli ilovalar orasida sudrab tashlash imkonini beradi (masalan, Galereyadan rasmni Eslatmalarga).

Drag-and-Drop fazalari

Drag-and-Drop ketma-ket uch fazaga bo‘linadi. Faza 1 — ushlash (Drag Start): foydalanuvchi jestni boshlaydi (odatda Long Press), tizim sudrab tashlash sessiyasini yaratadi, obyekt ma‘lumotlarini oladi va drag preview — barmoqni kuzatuvchi yarim shaffof element nusxasini ko‘rsatadi. Bu fazada tizim DnD tugaguncha boshqa jestlarni (aylantirish, matn tanlash) rad etadi.

Faza 2 — siljitish (Drag Move): barmoq ekranda harakatlanadi, drag preview teginish nuqtasini kuzatadi. Tizim barmoq ostidagi drop target-ni uzluksiz aniqlaydi va drag enter, drag move va drag exit hodisalarini yuboradi. Drop target vizual reaksiya berishi mumkin: yoritish, kengaytirish yoki qo‘shimcha chiziq ko‘rsatish. Bu faza vazifaning murakkabligiga qarab 0.5 dan 10+ sekundgacha davom etadi.

Faza 3 — qo‘yib yuborish (Drop): barmoq ekrandan uziladi. Tizim sudrab tashlash sessiyasini tugatadi va maqsadli elementda drop callback-ni chaqiradi. Agar drop target tashlashni rad etsa (masalan, yozish huquqi bo‘lmagan papkaga faylni sudrab tashlash), drag preview animatsiya bilan asl holatiga qaytadi (cancel animation). Agar tashlash qabul qilinsa, element asl joyidan yo‘qoladi va maqsadli joyda paydo bo‘ladi.

Ilovalararo sudrab tashlash — ikkala platformada ham mavjud funksiya. iOS Split View va Slide Over rejimlarida (iPad) ilovalar orasida Drag-and-Drop-ni qo‘llab-quvvatlaydi. Android Split Screen rejimida ilovalar orasida sudrab tashlashni qo‘llab-quvvatlaydi. Ma‘lumotlar UIPasteConfiguration (iOS) yoki ClipData (Android) orqali uzatiladi. Dasturchi qo‘llab-quvvatlanadigan ma‘lumot turlarini (iOS uchun UTI, Android uchun MIME) belgilaydi.

iOS-da Drag-and-Drop: UIDragInteraction

UIDragInteraction — iOS 11 da qo‘shilgan iOS-ning asosiy sudrab tashlash API-si. View-dan sudrab tashlashni yoqish uchun UIDragInteraction-ni UIDragInteractionDelegate bilan qo‘shing. Delegat qaysi elementlar sudralayotganini, ularning ko‘rinishi va xatti-harakatini aniqlaydi. Elementlarni qabul qilish uchun View tashlashni qabul qila oladimi va ma‘lumotlarni qanday qayta ishlashni aniqlaydigan UIDropInteractionDelegate bilan UIDropInteraction ishlatiladi.

// UIDragInteraction — kolleksiyadan elementni sudrab tashlash
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)

        // Drag preview — elementning kichiklashtirilgan nusxasi
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate — tashlashni qabul qilish uchun oyna interfeysi. canHandle(_:) metodi ma‘lumot turi qo‘llab-quvvatlanadimi yoki yo‘qligini tekshiradi. sessionDidUpdate(_:) vizual holatni yangilaydi (yoritish, qo‘shimcha chiziq). performDrop(_:) ma‘lumotlarning yakuniy qayta ishlanishini amalga oshiradi. iOS operatsiya turi bilan UIDropProposal-ni avtomatik chaqiradi: .move (ko‘chirish), .copy (nusxalash), .forbidden (taqiqlangan). Operatsiya turi vizual ko‘rinishga ta‘sir qiladi (nusxalash uchun preview burchagida + belgisi, forbidden uchun taqiq belgisi).

Android-da Drag-and-Drop: startDragAndDrop

View.startDragAndDrop() — API 24 dan (Android 7.0) mavjud bo‘lgan Android SDK sudrab tashlashni boshlash metodi. Element ushlangandan keyin chaqiriladi (odatda onLongClick da). Parametrlar: ClipData (ma‘lumot), DragShadowBuilder (vizual soya), Object myLocalState (mahalliy holat), flags. DragShadowBuilder barmoqni kuzatuvchi Bitmap yaratadi. Tizim sudrab tashlash vaqtida avtomatik ravishda animatsiya va tegish hodisalarini boshqaradi.

// Drag-and-Drop elementlari tartibini o‘zgartirish bilan RecyclerView
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // Ma‘lumot uzatish uchun ClipData yaratamiz
            val clipData = ClipData.newPlainText("item", items[position])

            // Kichiklashtirilgan preview bilan maxsus DragShadowBuilder
            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
        }
    }
}

Android-da tashlashni qabul qilish View.setOnDragListener() orqali amalga oshiriladi. Tinglovchi ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP, ACTION_DRAG_ENDED hodisalarini oladi. ACTION_DROP hodisasida ma‘lumotlar ClipData dan chiqariladi va maqsadli harakat bajariladi. RecyclerView da tartibni o‘zgartirish uchun ItemTouchHelper.SimpleCallback tavsiya etiladi — ushlash uchun Long Press-ni, elementlarning siljitish animatsiyasini va onMove/onSwiped yordamchi metodlarini avtomatik boshqaradigan o‘rnatilgan mexanizm.

Drag-and-Drop qo‘llanish stsenariylari

Ro‘yxatlar tartibini o‘zgartirish (drag to reorder) — DnD ning eng keng tarqalgan stsenariysi: foydalanuvchi ro‘yxat elementlarini tartibini o‘zgartirish uchun sudrab tashlaydi. Misollar: sevimli kontaktlarni qayta tartiblash, trekerlarda (Trello, Todoist) vazifalarni saralash, pleylistdagi treklar tartibini o‘zgartirish (Spotify, Apple Music). Android-da ItemTouchHelper yoki iOS-da UILongPressGestureRecognizer + hujayralarni qayta tartiblash orqali amalga oshiriladi.

Fayl menejerlari — fayllarni papkalar orasida nusxalash va ko‘chirish uchun Drag-and-Drop. iOS Files App, Android Files by Google, Dropbox — barchasi DnD-ni qo‘llab-quvvatlaydi. Faylni papka ustiga sudrab tashlash uni ichkariga ko‘chiradi (move), Option/Ctrl tugmasi bilan sudrab tashlash nusxalaydi (copy). Drop target yaqinlashganda vizual yoritiladi, papka chegaralarini ko‘rsatadi.

Kanban doskalari — Trello, Jira, Notion kartalarni ustunlar orasida (To Do → In Progress → Done) ko‘chirish uchun Drag-and-Drop dan foydalanadi. Sudrab tashlash vaqtida karta manba ustundan ajraladi, barmoqni kuzatadi va boshqa ustun chegarasini kesib o‘tganda animatsiya bilan kiritiladi. iOS 11+ paralaks effekti bilan UIDragPreview-ni qo‘llab-quvvatlaydi, bunda preview teginish nuqtasidan biroz chetga chiqib, chuqurlik hosil qiladi.

Springboard bo‘limlari (iOS) — iOS bosh ekranida ilova belgilarini sudrab tashlash. Belgini uzoq bosish “jiggling” rejimini faollashtiradi (belgilar titraydi), shundan so‘ng foydalanuvchi belgilarni sahifalar orasida ko‘chirishi va papkalar yaratishi mumkin. Bu DnD ning eng murakkab UX namunalaridan biri, chunki bir vaqtning o‘zida sudrab tashlash, titrash animatsiyasi va papkalarga guruhlashni boshqarishni talab qiladi.

Drag-and-Drop uchun UX tavsiyalari

Vizual qayta aloqa — Drag-and-Drop uchun juda muhim. Sudralayotgan obyekt o‘zgarishi kerak: kichiklashishi (iOS: scale 0.8–0.9), yarim shaffof bo‘lishi (alpha 0.7–0.8) va soya bilan interfeysdan yuqoriga ko‘tarilishi (shadow offset). Drop target yaqinlashganda vizual reaksiya berishi kerak: yoritish (highlight), kengaytirish (expand) yoki chegaralarni ko‘rsatish (border). Bu signallarsiz foydalanuvchi obyektni qayerga tashlashi mumkinligini tushunmaydi.

Qaytish animatsiyasi (drag cancel) — agar foydalanuvchi elementni tashlash zonasidan tashqarida yoki yaroqsiz zona ustida qo‘yib yuborsa, obyekt animatsiya bilan asl holatiga qaytishi kerak. iOS UIDragInteractionDelegate kuzatish uchun dragInteraction(_:sessionDidMove:) va qaytish animatsiyasi uchun dragInteraction(_:session:willEndWith:) ni taqdim etadi. Android View.setOnDragListener ACTION_DRAG_ENDED ni oladi, bu erda ValueAnimator yoki ObjectAnimator orqali qaytish animatsiyasini boshlash mumkin.

Foydalanish imkoniyati: harakat cheklovlari bo‘lgan foydalanuvchilar sudrab tashlash jestini bajara olmasligi mumkin. Ro‘yxatlar uchun “Yuqoriga/pastga ko‘chirish” tugmalari, fayllar uchun “Papkaga ko‘chirish” kontekst menyusi orqali muqobil variantlarni taqdim eting. iOS VoiceOver elementlarni ko‘chirish uchun “Drag” rotor harakatini qo‘llab-quvvatlaydi. Android TalkBack AccessibilityNodeInfo.addAction() orqali maxsus harakatlarni taqdim etadi. Nike Run Club va Apple Health standart tugmalar orqali kirish bilan dashboardda metrikalar tartibini o‘zgartirish uchun DnD dan foydalanadi.