Sürükle ve Bırak — mobil uygulamalarda sürükle ve bırak nasıl çalışır

Sürükle ve Bırak Nedir?

Sürükle ve Bırak (DnD), kullanıcının parmağı veya faresiyle bir nesneyi tuttuğu, başka bir konuma taşıdığı ve bıraktığı grafik arayüz öğelerini manipüle etme yöntemidir. Mobil arayüzlerde, Sürükle ve Bırak genellikle uzun basmayla başlatılır — kullanıcı öğeyi 300–500 ms boyunca basılı tutar, ardından sistem arayüzü sürükleme moduna geçirir ve parmak hareketi nesneyi taşır.

Tarihsel olarak, Sürükle ve Bırak, masaüstü arayüzlerinde (Xerox Star, 1981; Macintosh, 1984) kopyala/yapıştır komutlarına bir alternatif olarak ortaya çıktı. Mobil platformlarda tam destek, iOS 11 (2017) ile UIDragInteraction ve Android 7.0 (2016) ile Çoklu Pencere Sürükle ve Bırak ile geldi. Bundan önce, mobil uygulamalarda sürükleme, jest tanıyıcılar aracılığıyla özel çözümlerle uygulanıyordu.

Temel kavramlar: sürükleme oturumu (drag session), sürükleme öğeleri (drag items), sürükleme ön izlemesi (drag preview — nesnenin görsel temsili), bırakma hedefi (drop target), bırakma önerisi (drop proposal — bırakma eylemi: taşı, kopyala, bağla). Sistem, oturumu işletim sistemi düzeyinde yönetir ve farklı uygulamalar arasında nesnelerin sürüklenmesine olanak tanır (örneğin, Galeri'den Notlar'a bir fotoğraf).

Sürükle ve Bırak’ın Aşamaları

Sürükle ve Bırak üç ardışık aşamaya ayrılır. Aşama 1 — Tutma (Sürükleme Başlangıcı): kullanıcı hareketi başlatır (genellikle uzun basma), sistem bir sürükleme oturumu oluşturur, nesnenin verilerini yakalar ve bir sürükleme ön izlemesi gösterir — parmağı takip eden öğenin yarı saydam bir kopyası. Bu aşamada sistem, DnD tamamlanana kadar diğer hareketleri (kaydırma, metin seçme) reddeder.

Aşama 2 — Hareket Ettirme (Sürükleme Hareketi): parmak ekranda hareket eder, sürükleme ön izlemesi dokunma noktasını takip eder. Sistem, parmağın altındaki bırakma hedefini sürekli olarak belirler ve drag-enter, drag-move ve drag-exit olaylarını gönderir. Bırakma hedefi görsel olarak tepki verebilir: vurgulama, genişletme veya bir ekleme çizgisi gösterme. Bu aşama, görevin karmaşıklığına bağlı olarak 0,5 ila 10+ saniye sürer.

Aşama 3 — Bırakma (Düşürme): parmak ekrandan kalkar. Sistem sürükleme oturumunu sonlandırır ve hedef öğede bırakma geri aramasını çağırır. Bırakma hedefi bırakmayı reddederse (örneğin, yazma izni olmayan bir klasöre dosya sürükleme), sürükleme ön izlemesi animasyonlu olarak orijinal konumuna geri döner (iptal animasyonu). Bırakma kabul edilirse, öğe orijinal konumundan kaybolur ve hedefte görünür.

Uygulamalar arası sürükleme, her iki platformda da bulunan bir özelliktir. iOS, Split View ve Slide Over modunda (iPad) uygulamalar arasında Sürükle ve Bırak’ı destekler. Android, Split Screen modunda uygulamalar arasında sürüklemeyi destekler. Veriler, UIPasteConfiguration (iOS) veya ClipData (Android) aracılığıyla aktarılır. Geliştirici, desteklenen veri türlerini (iOS için UTI, Android için MIME) belirtir.

iOS’ta Sürükle ve Bırak: UIDragInteraction

UIDragInteraction, iOS 11’de eklenen sürükleme için ana iOS API’sidir. Bir View’den sürüklemeyi etkinleştirmek için UIDragInteractionDelegate ile UIDragInteraction ekleyin. Temsilci, hangi öğelerin sürüklenebilir olduğunu, görünümlerini ve davranışlarını tanımlar. Öğeleri almak için, View’in bir bırakmayı kabul edip edemeyeceğini ve verilerin nasıl işleneceğini belirleyen UIDropInteractionDelegate ile UIDropInteraction kullanın.

// UIDragInteraction — bir koleksiyondan öğe sürükleme
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)

        // Sürükleme ön izlemesi — öğenin küçültülmüş kopyası
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate, bırakmaları almak için yansıma arayüzüdür. canHandle(_:) yöntemi, veri türünün desteklenip desteklenmediğini kontrol eder. sessionDidUpdate(_:) görsel durumu günceller (vurgulama, ekleme çizgisi). performDrop(_:) son veri işlemesini gerçekleştirir. iOS, işlem türüyle (.move, .copy veya .forbidden) otomatik olarak UIDropProposal’ı çağırır. İşlem türü görsel görünümü etkiler (kopyalama için ön izlemenin köşesinde + simgesi, forbidden için yasak işareti).

Android’de Sürükle ve Bırak: startDragAndDrop

View.startDragAndDrop(), API 24’ten (Android 7.0) itibaren kullanılabilen, sürüklemeyi başlatmak için Android SDK yöntemidir. Öğeyi tuttuktan sonra (genellikle onLongClick içinde) çağrılır. Parametreler: ClipData (veri), DragShadowBuilder (görsel gölge), Object myLocalState (yerel durum), flags. DragShadowBuilder, parmağı takip eden bir Bitmap oluşturur. Sistem, sürükleme sırasında animasyonları ve dokunma olaylarını otomatik olarak yönetir.

// Yeniden sıralamalı RecyclerView öğesinin Sürükle ve Bırak'ı
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // Veri aktarımı için ClipData oluşturma
            val clipData = ClipData.newPlainText("item", items[position])

            // Küçültülmüş ön izlemeli özel 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
        }
    }
}

Bırakma alma Android’de View.setOnDragListener() aracılığıyla uygulanır. Dinleyici, ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP ve ACTION_DRAG_ENDED olaylarını alır. ACTION_DROP olayında, veriler ClipData’dan çıkarılır ve hedef eylem gerçekleştirilir. Yeniden sıralamalı RecyclerView için ItemTouchHelper.SimpleCallback önerilir — tutma için uzun basmayı, hareket animasyonunu ve onMove/onSwiped yardımcı yöntemlerini otomatik olarak işleyen yerleşik bir mekanizmadır.

Sürükle ve Bırak Kullanım Durumları

Listeleri yeniden sıralama (drag to reorder) en yaygın DnD senaryosudur: kullanıcılar sıralamayı değiştirmek için liste öğelerini sürükler. Örnekler: favorilerdeki kişileri yeniden düzenleme, izleyicilerde (Trello, Todoist) görevleri sıralama, bir çalma listesindeki parçaları yeniden sıralama (Spotify, Apple Music). Android’de ItemTouchHelper veya iOS’ta UILongPressGestureRecognizer ile hücre yeniden sıralama yoluyla uygulanır.

Dosya yöneticileri — dosyaları klasörler arasında kopyalamak ve taşımak için Sürükle ve Bırak. iOS Dosyalar Uygulaması, Android Files by Google, Dropbox — hepsi DnD’yi destekler. Bir dosyayı klasöre sürüklemek onu içeri taşır (move), Option/Ctrl basılıyken sürüklemek kopyalar (copy). Bırakma hedefi, fare üzerine geldiğinde görsel olarak vurgulanır ve klasör sınırlarını gösterir.

Kanban panoları — Trello, Jira, Notion, kartları sütunlar arasında taşımak için Sürükle ve Bırak kullanır (To Do → In Progress → Done). Sürüklerken, kart kaynak sütunundan ayrılır, parmağı takip eder ve başka bir sütunun sınırını geçtiğinde animasyonla eklenir. iOS 11+, ön izlemenin dokunma noktasından hafifçe eğilerek derinlik oluşturduğu paralaks efektli UIDragPreview’i destekler.

Springboard bölümleri (iOS) — iOS ana ekranında uygulama simgelerini sürükleme. Bir simgeye uzun basmak “sallanma” modunu etkinleştirir (simgeler titrer), ardından kullanıcı simgeleri sayfalar arasında taşıyabilir ve klasörler oluşturabilir. Bu, en karmaşık DnD UX desenlerinden biridir çünkü sürükleme, sallanma animasyonu ve klasör gruplamayı aynı anda işlemeyi gerektirir.

Sürükle ve Bırak için UX Önerileri

Görsel geri bildirim, Sürükle ve Bırak için kritik öneme sahiptir. Sürüklenen nesne değişmelidir: küçülmeli (iOS: ölçek 0,8–0,9), yarı saydam hale gelmeli (alfa 0,7–0,8) ve bir gölgeyle arayüzün üzerinde yükselmeli (shadow offset). Bırakma hedefi, fare üzerine geldiğinde görsel olarak tepki vermelidir: vurgulama, genişletme veya bir kenarlık gösterme. Bu sinyaller olmadan, kullanıcı nesneyi nereye bırakabileceğini bilemez.

Dönüş animasyonu (sürükleme iptali) — kullanıcı öğeyi bırakma bölgesinin dışında veya geçersiz bir bölgede bırakırsa, nesne animasyonlu olarak orijinal konumuna dönmelidir. iOS UIDragInteractionDelegate, izleme için dragInteraction(_:sessionDidMove:) ve dönüş animasyonu için dragInteraction(_:session:willEndWith:) sağlar. Android View.setOnDragListener, ValueAnimator veya ObjectAnimator aracılığıyla bir dönüş animasyonunun başlatılabileceği ACTION_DRAG_ENDED’i alır.

Erişilebilirlik: motor kısıtlamaları olan kullanıcılar sürükleme hareketini gerçekleştiremeyebilir. Listeler için “Yukarı/Aşağı Taşı” düğmeleri ve dosyalar için “Klasöre Taşı” bağlam menüsü aracılığıyla alternatifler sağlayın. iOS VoiceOver, öğeleri taşımak için döner eylem “Sürükle”’yi destekler. Android TalkBack, AccessibilityNodeInfo.addAction() aracılığıyla özel eylemler sağlar. Nike Run Club ve Apple Health, gösterge tablosundaki metrikleri yeniden sıralamak için DnD kullanır — standart düğmeler aracılığıyla erişimle.