Drag-and-Drop — मोबाइल एप्लिकेशन में Drag and Drop कैसे काम करता है

Drag-and-Drop क्या है?

Drag-and-Drop (DnD) ग्राफिकल इंटरफ़ेस तत्वों में हेरफेर करने की एक विधि है जिसमें उपयोगकर्ता अपनी उंगली या माउस से किसी ऑब्जेक्ट को पकड़ता है, उसे दूसरी स्थिति में ले जाता है, और छोड़ देता है। मोबाइल इंटरफ़ेस में, Drag-and-Drop आमतौर पर लॉन्ग प्रेस से शुरू होता है — उपयोगकर्ता तत्व को 300–500 ms तक दबाए रखता है, जिसके बाद सिस्टम इंटरफ़ेस को ड्रैग मोड में बदल देता है, और उंगली की गति ऑब्जेक्ट को स्थानांतरित करती है।

ऐतिहासिक रूप से, Drag-and-Drop डेस्कटॉप इंटरफ़ेस (Xerox Star, 1981; Macintosh, 1984) में कॉपी/पेस्ट कमांड के विकल्प के रूप में उत्पन्न हुआ। मोबाइल प्लेटफ़ॉर्म पर, पूर्ण समर्थन iOS 11 (2017) में UIDragInteraction के साथ और Android 7.0 (2016) में मल्टी-विंडो Drag-and-Drop के साथ दिखाई दिया। इससे पहले, मोबाइल ऐप में ड्रैगिंग जेस्चर रिकॉग्नाइज़र के माध्यम से कस्टम समाधानों द्वारा कार्यान्वित की जाती थी।

मुख्य अवधारणाएँ: ड्रैग सेशन, ड्रैग आइटम, ड्रैग प्रीव्यू (ऑब्जेक्ट का दृश्य प्रतिनिधित्व), ड्रॉप टार्गेट, ड्रॉप प्रपोज़ल (ड्रॉप पर कार्रवाई: मूव, कॉपी, लिंक)। सिस्टम ऑपरेटिंग सिस्टम स्तर पर सेशन का प्रबंधन करता है, जिससे विभिन्न अनुप्रयोगों के बीच ऑब्जेक्ट खींचे जा सकते हैं (उदाहरण: गैलरी से नोट्स में फ़ोटो)।

Drag-and-Drop के चरण

Drag-and-Drop तीन क्रमिक चरणों में विभाजित है। चरण 1 — पकड़ना (ड्रैग स्टार्ट): उपयोगकर्ता जेस्चर शुरू करता है (आमतौर पर लॉन्ग प्रेस), सिस्टम एक ड्रैग सेशन बनाता है, ऑब्जेक्ट का डेटा कैप्चर करता है और ड्रैग प्रीव्यू प्रदर्शित करता है — तत्व की एक अर्ध-पारदर्शी प्रतिलिपि जो उंगली का अनुसरण करती है। इस चरण में, सिस्टम DnD पूरा होने तक अन्य जेस्चर (स्क्रॉलिंग, टेक्स्ट चयन) को अस्वीकार करता है।

चरण 2 — हिलाना (ड्रैग मूव): उंगली स्क्रीन पर चलती है, ड्रैग प्रीव्यू स्पर्श बिंदु का अनुसरण करता है। सिस्टम लगातार उंगली के नीचे ड्रॉप टार्गेट निर्धारित करता है और ड्रैग-एंटर, ड्रैग-मूव और ड्रैग-एक्ज़िट इवेंट भेजता है। ड्रॉप टार्गेट दृश्य रूप से प्रतिक्रिया कर सकता है: हाइलाइट, विस्तार या इंसर्शन लाइन दिखाना। यह चरण कार्य की जटिलता के आधार पर 0.5 से 10+ सेकंड तक रहता है।

चरण 3 — छोड़ना (ड्रॉप): उंगली स्क्रीन से उठती है। सिस्टम ड्रैग सेशन समाप्त करता है और लक्ष्य तत्व पर ड्रॉप कॉलबैक को कॉल करता है। यदि ड्रॉप टार्गेट ड्रॉप को अस्वीकार करता है (उदाहरण: बिना लिखने की अनुमति वाले फ़ोल्डर में फ़ाइल खींचना), तो ड्रैग प्रीव्यू एनिमेटेड रूप से मूल स्थिति में वापस आ जाता है (रद्दीकरण एनिमेशन)। यदि ड्रॉप स्वीकार किया जाता है, तो तत्व मूल स्थिति से गायब हो जाता है और लक्ष्य पर प्रकट होता है।

क्रॉस-ऐप ड्रैगिंग — एक सुविधा जो दोनों प्लेटफ़ॉर्म पर उपलब्ध है। iOS Split View और Slide Over मोड (iPad) में ऐप्स के बीच Drag-and-Drop का समर्थन करता है। Android Split Screen मोड में ऐप्स के बीच ड्रैगिंग का समर्थन करता है। डेटा UIPasteConfiguration (iOS) या ClipData (Android) के माध्यम से स्थानांतरित किया जाता है। डेवलपर समर्थित डेटा प्रकार (iOS के लिए UTI, Android के लिए MIME) निर्दिष्ट करता है।

iOS में Drag-and-Drop: UIDragInteraction

UIDragInteraction — iOS 11 में जोड़ा गया ड्रैगिंग के लिए मुख्य iOS API है। View से ड्रैगिंग सक्षम करने के लिए, UIDragInteractionDelegate के साथ UIDragInteraction जोड़ें। डेलीगेट परिभाषित करता है कि कौन से तत्व ड्रैग किए जा सकते हैं, उनकी उपस्थिति और व्यवहार। तत्वों को प्राप्त करने के लिए, UIDropInteractionDelegate के साथ UIDropInteraction का उपयोग करें, जो निर्धारित करता है कि View ड्रॉप स्वीकार कर सकता है या नहीं और डेटा को कैसे संसाधित करना है।

// UIDragInteraction — संग्रह से तत्व खींचना
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)

        // ड्रैग प्रीव्यू — तत्व की छोटी प्रतिलिपि
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate — ड्रॉप प्राप्त करने के लिए दर्पण इंटरफ़ेस है। canHandle(_:) विधि जाँचती है कि डेटा प्रकार समर्थित है या नहीं। sessionDidUpdate(_:) दृश्य रूप से स्थिति को अपडेट करता है (हाइलाइट, इंसर्शन लाइन)। performDrop(_:) अंतिम डेटा प्रोसेसिंग करता है। iOS स्वचालित रूप से ऑपरेशन प्रकार के साथ UIDropProposal कॉल करता है: .move, .copy, या .forbidden। ऑपरेशन प्रकार दृश्य प्रदर्शन को प्रभावित करता है (कॉपी के लिए प्रीव्यू के कोने में + आइकन, forbidden के लिए निषेध चिह्न)।

Android में Drag-and-Drop: startDragAndDrop

View.startDragAndDrop() — API 24 (Android 7.0) से उपलब्ध ड्रैग शुरू करने की Android SDK विधि है। इसे तत्व को पकड़ने के बाद (आमतौर पर onLongClick में) कॉल किया जाता है। पैरामीटर: ClipData (डेटा), DragShadowBuilder (दृश्य छाया), Object myLocalState (स्थानीय स्थिति), flags। DragShadowBuilder एक Bitmap बनाता है जो उंगली का अनुसरण करता है। सिस्टम ड्रैग के दौरान स्वचालित रूप से एनिमेशन और स्पर्श इवेंट का प्रबंधन करता है।

// पुनर्व्यवस्थापन के साथ RecyclerView तत्व का Drag-and-Drop
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // डेटा स्थानांतरण के लिए ClipData बनाना
            val clipData = ClipData.newPlainText("item", items[position])

            // छोटे प्रीव्यू के साथ कस्टम 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 में View.setOnDragListener() के माध्यम से कार्यान्वित किया जाता है। लिसनर ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP और ACTION_DRAG_ENDED इवेंट प्राप्त करता है। ACTION_DROP इवेंट में, डेटा ClipData से निकाला जाता है और लक्ष्य कार्रवाई की जाती है। पुनर्व्यवस्थित करने वाले RecyclerView के लिए, ItemTouchHelper.SimpleCallback अनुशंसित है — एक अंतर्निहित तंत्र जो स्वचालित रूप से पकड़ने के लिए लॉन्ग प्रेस, मूव एनिमेशन और onMove/onSwiped उपयोगिता विधियों को संभालता है।

Drag-and-Drop के उपयोग के मामले

सूची पुनर्व्यवस्थित करना (drag to reorder) — सबसे आम DnD परिदृश्य: उपयोगकर्ता अपना क्रम बदलने के लिए सूची आइटम खींचते हैं। उदाहरण: पसंदीदा में संपर्कों को पुनर्व्यवस्थित करना, ट्रैकर्स (Trello, Todoist) में कार्यों को सॉर्ट करना, प्लेलिस्ट में ट्रैक को पुनर्व्यवस्थित करना (Spotify, Apple Music)। Android में ItemTouchHelper या iOS में UILongPressGestureRecognizer + सेल पुनर्व्यवस्थापन के माध्यम से कार्यान्वित किया जाता है।

फ़ाइल प्रबंधक — फ़ाइलों को फ़ोल्डरों के बीच कॉपी और ले जाने के लिए Drag-and-Drop। iOS Files App, Android Files by Google, Dropbox — सभी DnD का समर्थन करते हैं। फ़ाइल को फ़ोल्डर पर खींचना उसे अंदर ले जाता है (मूव), Option/Ctrl दबाकर खींचना कॉपी करता है। ड्रॉप टार्गेट होवर करने पर दृश्य रूप से हाइलाइट होता है, फ़ोल्डर की सीमाएँ दिखाता है।

कानबन बोर्ड — Trello, Jira, Notion कार्ड को कॉलम के बीच ले जाने के लिए Drag-and-Drop का उपयोग करते हैं (To Do → In Progress → Done)। खींचते समय, कार्ड अपने स्रोत कॉलम से अलग हो जाता है, उंगली का अनुसरण करता है, और दूसरे कॉलम की सीमा पार करते समय एनिमेशन के साथ सम्मिलित होता है। iOS 11+ पैरालैक्स प्रभाव के साथ UIDragPreview का समर्थन करता है, जहाँ प्रीव्यू स्पर्श बिंदु से थोड़ा झुकता है, गहराई पैदा करता है।

Springboard अनुभाग (iOS) — iOS होम स्क्रीन पर ऐप आइकन खींचना। आइकन पर लॉन्ग प्रेस “जिगलिंग” मोड सक्रिय करता है (आइकन हिलते हैं), जिसके बाद उपयोगकर्ता पृष्ठों के बीच आइकन ले जा सकता है और फ़ोल्डर बना सकता है। यह सबसे जटिल DnD UX पैटर्न में से एक है क्योंकि इसके लिए ड्रैगिंग, हिलाने वाले एनिमेशन और फ़ोल्डर समूहीकरण को एक साथ संभालने की आवश्यकता होती है।

Drag-and-Drop के लिए UX अनुशंसाएँ

दृश्य प्रतिक्रिया — Drag-and-Drop के लिए अत्यंत महत्वपूर्ण है। खींचे गए ऑब्जेक्ट को बदलना चाहिए: सिकुड़ना (iOS: स्केल 0.8–0.9), अर्ध-पारदर्शी होना (alpha 0.7–0.8), और छाया के साथ इंटरफ़ेस से ऊपर उठना (shadow offset)। ड्रॉप टार्गेट को होवर पर दृश्य रूप से प्रतिक्रिया देनी चाहिए: हाइलाइट, विस्तार या बॉर्डर दिखाना। इन संकेतों के बिना, उपयोगकर्ता यह नहीं समझ पाता कि वे ऑब्जेक्ट को कहाँ छोड़ सकते हैं।

वापसी एनिमेशन (ड्रैग रद्द) — यदि उपयोगकर्ता ड्रॉप क्षेत्र के बाहर या अमान्य क्षेत्र पर तत्व छोड़ता है, तो ऑब्जेक्ट को एनिमेटेड रूप से अपनी मूल स्थिति में वापस आना चाहिए। iOS UIDragInteractionDelegate ट्रैकिंग के लिए dragInteraction(_:sessionDidMove:) और वापसी एनिमेशन के लिए dragInteraction(_:session:willEndWith:) प्रदान करता है। Android View.setOnDragListener ACTION_DRAG_ENDED प्राप्त करता है, जहाँ ValueAnimator या ObjectAnimator के माध्यम से वापसी एनिमेशन शुरू किया जा सकता है।

पहुँच क्षमता: मोटर सीमाओं वाले उपयोगकर्ता ड्रैग जेस्चर करने में सक्षम नहीं हो सकते हैं। सूचियों के लिए “ऊपर/नीचे ले जाएँ” बटन और फ़ाइलों के लिए “फ़ोल्डर में ले जाएँ” संदर्भ मेनू के माध्यम से विकल्प प्रदान करें। iOS VoiceOver तत्वों को स्थानांतरित करने के लिए रोटर क्रिया “ड्रैग” का समर्थन करता है। Android TalkBack AccessibilityNodeInfo.addAction() के माध्यम से कस्टम क्रियाएँ प्रदान करता है। Nike Run Club और Apple Health डैशबोर्ड पर मीट्रिक को पुनर्व्यवस्थित करने के लिए DnD का उपयोग करते हैं — मानक बटनों के माध्यम से पहुँच के साथ।