Drag-and-Drop — mahiyyəti, mobil tətbiqlərdə Drag and Drop

Drag-and-Drop nədir?

Drag-and-Drop (DnD, sürükləmə) — istifadəçinin obyekti barmaq və ya siçanla tutub başqa yerə daşıdığı və buraxdığı qrafik interfeys elementlərinin idarə edilməsi üsuludur. Mobil interfeyslərdə Drag-and-Drop adətən uzun basma (Long Press) ilə başladılır — istifadəçi elementi 300–500 ms saxlayır, bundan sonra sistem interfeysi sürükləmə rejiminə keçirir və barmağın hərəkəti obyekti özü ilə aparır.

Tarixi olaraq Drag-and-DDrop masaüstü interfeyslərdə (Xerox Star, 1981; Macintosh, 1984) köçür/yapışdır əmrlərinə alternativ olaraq meydana çıxdı. Mobil platformalarda tam dəstək iOS 11 (2017) ilə UIDragInteraction və Android 7.0 (2016) ilə Multi-Window Drag-and-Drop-da peyda oldu. Bundan əvvəl mobil tətbiqlərdə sürükləmə gesture recognizers vasitəsilə xüsusi həllərlə həyata keçirilirdi.

Əsas anlayışlar: drag session (sürükləmə sessiyası), drag items (sürüklənən obyektlər), drag preview (obyektin vizual görüntüsü), drop target (buraxma zonası), drop proposal (buraxma zamanı hərəkət: köçür, kopyala, əlaqələndir). Sistem sessiyanı əməliyyat sistemi səviyyəsində idarə edir ki, bu da obyektlərin müxtəlif tətbiqlər arasında sürüklənməsinə imkan verir (məsələn, Qalereyadan şəkili Qeydlərə).

Drag-and-Drop fazaları

Drag-and-Drop ardıcıl üç fazaya bölünür. Faza 1 — tutma (Drag Start): istifadəçi jesti başlatır (adətən Long Press), sistem sürükləmə sessiyası yaradır, obyektin məlumatlarını əldə edir və drag preview — barmağı izləyən yarımşfaf element surətini göstərir. Bu fazada sistem DnD tamamlanana qədər digər jestləri (sürüşdürmə, mətn seçmə) rədd edir.

Faza 2 — hərəkət etdirmə (Drag Move): barmaq ekranda hərəkət edir, drag preview toxunma nöqtəsini izləyir. Sistem barmağın altındakı drop target-i davamlı müyyənləşdirir və drag enter, drag move və drag exit hadisələrini göndərir. Drop target vizual reaksiya verə bilər: işıqlana, genişlənə və ya əlavə xətti göstərə bilər. Bu faza tapşırığın mürəkkəbliyindən asılı olaraq 0.5-dən 10+ saniyəyə qədər davam edir.

Faza 3 — buraxma (Drop): barmaq ekrandan ayrılır. Sistem sürükləmə sessiyasını bitirir və hədəf elementdə drop callback-i çağırır. Drop target buraxmanı rədd edərsə (məsələn, yazma icazəsi olmayan qovluğa fayl sürükləmək), drag preview animasiya ilə əsl vəziyyətinə qayıdır (cancel animation). Buraxma qəbul edilɐrsə, element əsl vəziyyətdən yox olur və hədəf yerində görünür.

Tətbiqlərarası sürükləmə — hər iki platformada mövcud olan funksiya. iOS Split View və Slide Over rejimlərində (iPad) tətbiqlər arasında Drag-and-Drop-u dəstəkləyir. Android Split Screen rejimində tətbiqlər arasında sürükləməni dəstəkləyir. Məlumatlar UIPasteConfiguration (iOS) və ya ClipData (Android) vasitəsilə ötürülür. Tərtibatçı dəstəklənən məlumat növlərini (iOS üçün UTI, Android üçün MIME) göstərir.

iOS-da Drag-and-Drop: UIDragInteraction

UIDragInteraction — iOS 11-də əlavə edilmiş iOS-un əsas sürükləmə API-sidir. View-dən sürükləməni aktivləşdirmək üçün UIDragInteraction-i UIDragInteractionDelegate ilə əlavə edin. Deleqat hansı elementlərin sürükləndiyini, onların görünüşünü və davranışını müyyənləşdirir. Elementləri qəbul etmək üçün View-in buraxmanı qəbul edib-edə bilmədiyini və məlumatların necə emal ediləcəyini təyin edən UIDropInteractionDelegate ilə UIDropInteraction istifadə olunur.

// UIDragInteraction — kolleksiyadan elementin sürüklənməsi
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 — elementin kiçildilmiş surəti
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate — buraxmanı qəbul etmək üçün güzgü interfeys. canHandle(_:) metodu məlumat növünün dəstəklənib-dəstəklənmədiyini yoxlayır. sessionDidUpdate(_:) vizual olaraq vəziyyəti yeniləyir (işıqlanma, əlavə xətt). performDrop(_:) məlumatların son emalını həyata keçirir. iOS əməliyyat növü ilə UIDropProposal-ı avtomatik çağırır: .move (köçür), .copy (kopyala), .forbidden (qadağandır). Əməliyyat növü vizual göstərimə təsir edir (kopyalama üçün preview küncündə + işarəsi, forbidden üçün qadağan işarəsi).

Android-də Drag-and-Drop: startDragAndDrop

View.startDragAndDrop() — API 24-dən (Android 7.0) mövcud olan Android SDK-nın sürükləməyə başlama metodu. Element tutulduqdan sonra çağırılır (adətən onLongClick-də). Parametrlər: ClipData (məlumat), DragShadowBuilder (vizual kölgə), Object myLocalState (yerli vəziyyət), flags. DragShadowBuilder barmağı izləyən Bitmap yaradır. Sistem sürükləmə zamanı avtomatik olaraq animasiya və toxunma hadisələrini idarə edir.

// Drag-and-Drop elementlərin sıralanmasını dəyişməklə RecyclerView
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // Məlumat ötürmək üçün ClipData yaradırıq
            val clipData = ClipData.newPlainText("item", items[position])

            // Kiçildilmiş preview ilə xüsusi 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-də buraxmanın qəbulu View.setOnDragListener() vasitəsilə həyata keçirilir. Dinləyici ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP, ACTION_DRAG_ENDED hadisələrini alır. ACTION_DROP hadisəsində məlumatlar ClipData-dan çıxarılır və hədəf əməliyyat yerinə yetirilir. RecyclerView-də sıralamanı dəyişmək üçün ItemTouchHelper.SimpleCallback tövsiyə olunur — tutma üçün Long Press-i, elementlərin hərəkət animasiyasını və onMove/onSwiped köməkçi metodlarını avtomatik idarə edən daxili mexanizm.

Drag-and-Drop tətbiq ssenariləri

Siyahıların sıralanmasının dəyişdirilməsi (drag to reorder) — DnD-nin ən geniş yayılmış ssenarisi: istifadəçi siyahı elementlərini sıralamanı dəyişmək üçün sürükləyir. Nümunələr: seçilmiş kontaktların yerlərinin dəyişdirilməsi, tracker-lərdə (Trello, Todoist) tapşırıqların çeşidlənməsi, pleylistdə treklərin sırasının dəyişdirilməsi (Spotify, Apple Music). Android-də ItemTouchHelper və ya iOS-da UILongPressGestureRecognizer + xanaların yerlərinin dəyişdirilməsi ilə həyata keçirilir.

Fayl menecerləri — faylları qovluqlar arasında köçürmək və kopyalamaq üçün Drag-and-Drop. iOS Files App, Android Files by Google, Dropbox — hamısı DnD-ni dəstəkləyir. Faylı qovluğun üzərinə sürükləmək onu içəri köçürür (move), Option/Ctrl düməsi ilə sürükləmə kopyalayır (copy). Drop target üzərinə gətirildikdə qovluğun sərhədlərini göstərərək vizual işıqlanır.

Kanban panoları — Trello, Jira, Notion kartları sütunlar arasında (To Do → In Progress → Done) daşımaq üçün Drag-and-Drop-dan istifadə edir. Sürükləmə zamanı kart mənbə sütundan ayrılır, barmağı izləyir və başqa sütunun sərhəddini keçdikdə animasiya ilə daxil edilir. iOS 11+ paralaks effekti ilə UIDragPreview-u dəstəkləyir, burada preview toxunma nöqtəsindən bir qədər kənara çıxaraq dərinlik yaradır.

Springboard bölmələri (iOS) — iOS əsas ekranında tətbiq nişanlarının sürüklənməsi. Nişanı uzun basmaq „jiggling” rejimini aktivləşdirir (nişanlar titrəyir), bundan sonra istifadəçi nişanları səhifələr arasında daşıya və qovluqlar yarada bilər. Bu, DnD-nin ən mürəkkəb UX nümunələrindən biridir, çünki eyni anda sürükləmə, titrəmə animasiyası və qovluqlara qruplaşdırma tələb edir.

Drag-and-Drop üçün UX tövsiyələri

Vizual əks əlaqə — Drag-and-Drop üçün kritik əhəmiyyət kəsb edir. Sürüklənən obyekt dəyişməlidir: kiçilməli (iOS: scale 0.8–0.9), yarımşfaf olmalı (alpha 0.7–0.8) və kölgə ilə interfeysdən yuxarı qalxmalıdır (shadow offset). Drop target üzərinə gətirildikdə vizual reaksiya verməlidir: işıqlanma (highlight), genişlənmə (expand) və ya sərhəd göstərmə (border). Bu siqnallar olmadan istifadəçi obyekti hara buraxa biləcəyini başa düşmür.

Qayıtma animasiyası (drag cancel) — istifadəçi elementi buraxma zonasından kənarda və ya etibarsız zonanın üzərində buraxarsa, obyekt animasiya ilə əsl vəziyyətinə qayıtmalıdır. iOS UIDragInteractionDelegate dragInteraction(_:sessionDidMove:) izləmə üçün və dragInteraction(_:session:willEndWith:) qayıtma animasiyası üçün təqdim edir. Android View.setOnDragListener ACTION_DRAG_ENDED alır, burada ValueAnimator və ya ObjectAnimator vasitəsilə qayıtma animasiyası başladıla bilər.

Əlçatanlıq: motor məhdudiyyəti olan istifadəçilər sürükləmə jestini yerinə yetirə bilməyə bilər. Siyahılar üçün “Yuxarı/Aşağı apar” düymələri, fayllar üçün “Qovluğa apar” kontekst menyusu vasitəsilə alternativlər təmin edin. iOS VoiceOver elementləri daşımaq üçün “Drag” rotor hərəkətini dəstəkləyir. Android TalkBack AccessibilityNodeInfo.addAction() vasitəsilə xüsusi hərəkətləri təmin edir. Nike Run Club və Apple Health standart düymələr vasitəsilə girişlə dashboard-da metriklərin sıralanmasını dəyişmək üçün DnD-dan istifadə edir.