ڈریگ اور ڈراپ — موبائل ایپلیکیشنز میں ڈریگ اور ڈراپ کیسے کام کرتا ہے

ڈریگ اور ڈراپ کیا ہے؟

ڈریگ اور ڈراپ (DnD) گرافیکل انٹرفیس عناصر میں ہیرا پھیری کا ایک طریقہ ہے جس میں صارف اپنی انگلی یا ماؤس سے کسی آبجیکٹ کو پکڑتا ہے، اسے دوسری جگہ لے جاتا ہے اور چھوڑ دیتا ہے۔ موبائل انٹرفیس میں، ڈریگ اور ڈراپ عام طور پر لمبے دباؤ سے شروع ہوتا ہے — صارف عنصر کو 300–500 ms تک دبائے رکھتا ہے، جس کے بعد سسٹم انٹرفیس کو ڈریگ موڈ میں بدل دیتا ہے اور انگلی کی حرکت آبجیکٹ کو منتقل کرتی ہے۔

تاریخی طور پر، ڈریگ اور ڈراپ ڈیسک ٹاپ انٹرفیس (Xerox Star، 1981؛ Macintosh، 1984) میں کاپی/پیسٹ کمانڈز کے متبادل کے طور پر شروع ہوا۔ موبائل پلیٹ فارمز پر، مکمل سپورٹ iOS 11 (2017) میں UIDragInteraction کے ساتھ اور Android 7.0 (2016) میں ملٹی ونڈو ڈریگ اور ڈراپ کے ساتھ ظاہر ہوئی۔ اس سے پہلے، موبائل ایپس میں ڈریگنگ اشارہ پہچاننے والوں کے ذریعے حسب ضرورت حلوں سے لاگو کی جاتی تھی۔

اہم تصورات: ڈریگ سیشن، ڈریگ آئٹمز، ڈریگ پیش نظارہ (آبجیکٹ کی بصری نمائندگی)، ڈراپ ٹارگٹ، ڈراپ پروپوزل (ڈراپ پر عمل: منتقل کریں، کاپی کریں، لنک کریں)۔ سسٹم آپریٹنگ سسٹم کی سطح پر سیشن کا انتظام کرتا ہے، جس سے مختلف ایپلیکیشنز کے درمیان آبجیکٹ گھسیٹے جا سکتے ہیں (مثال: گیلری سے نوٹس میں تصویر)۔

ڈریگ اور ڈراپ کے مراحل

ڈریگ اور ڈراپ تین متواتر مراحل میں تقسیم ہے۔ مرحلہ 1 — پکڑنا (ڈریگ شروع): صارف اشارہ شروع کرتا ہے (عام طور پر لمبا دباؤ)، سسٹم ایک ڈریگ سیشن بناتا ہے، آبجیکٹ کا ڈیٹا حاصل کرتا ہے اور ڈریگ پیش نظارہ دکھاتا ہے — عنصر کی ایک نیم شفاف کاپی جو انگلی کا پیچھا کرتی ہے۔ اس مرحلے میں، سسٹم DnD مکمل ہونے تک دوسرے اشاروں (اسکرولنگ، متن کا انتخاب) کو مسترد کرتا ہے۔

مرحلہ 2 — حرکت دینا (ڈریگ موو): انگلی اسکرین پر حرکت کرتی ہے، ڈریگ پیش نظارہ ٹچ پوائنٹ کا پیچھا کرتا ہے۔ سسٹم مسلسل انگلی کے نیچے ڈراپ ٹارگٹ کا تعین کرتا ہے اور ڈریگ-اینٹر، ڈریگ-موو اور ڈریگ-ایگزٹ ایونٹس بھیجتا ہے۔ ڈراپ ٹارگٹ بصری طور پر ردعمل دے سکتا ہے: نمایاں کرنا، پھیلنا یا داخل کرنے کی لائن دکھانا۔ یہ مرحلہ کام کی پیچیدگی کے لحاظ سے 0.5 سے 10+ سیکنڈ تک رہتا ہے۔

مرحلہ 3 — چھوڑنا (ڈراپ): انگلی اسکرین سے اٹھتی ہے۔ سسٹم ڈریگ سیشن ختم کرتا ہے اور ہدف عنصر پر ڈراپ کال بیک کو کال کرتا ہے۔ اگر ڈراپ ٹارگٹ ڈراپ کو مسترد کرتا ہے (مثال: بغیر تحریر کی اجازت والے فولڈر میں فائل گھسیٹنا)، ڈریگ پیش نظارہ حرکت پذیری کے ساتھ اصل مقام پر واپس آ جاتا ہے (منسوخی حرکت پذیری)۔ اگر ڈراپ قبول کر لیا جاتا ہے، عنصر اصل مقام سے غائب ہو جاتا ہے اور ہدف پر ظاہر ہوتا ہے۔

کراس-ایپ ڈریگنگ — ایک خصوصیت جو دونوں پلیٹ فارمز پر دستیاب ہے۔ iOS Split View اور Slide Over موڈ (iPad) میں ایپس کے درمیان ڈریگ اور ڈراپ کو سپورٹ کرتا ہے۔ Android Split Screen موڈ میں ایپس کے درمیان ڈریگنگ کو سپورٹ کرتا ہے۔ ڈیٹا UIPasteConfiguration (iOS) یا ClipData (Android) کے ذریعے منتقل کیا جاتا ہے۔ ڈویلپر معاون ڈیٹا کی اقسام (iOS کے لیے UTI، Android کے لیے MIME) بتاتا ہے۔

iOS میں ڈریگ اور ڈراپ: 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 خود بخود آپریشن کی قسم (.move، .copy، یا .forbidden) کے ساتھ UIDropProposal کو کال کرتا ہے۔ آپریشن کی قسم بصری ڈسپلے کو متاثر کرتی ہے (کاپی کے لیے پیش نظارہ کے کونے میں + آئیکن، forbidden کے لیے ممانعت کا نشان)۔

Android میں ڈریگ اور ڈراپ: startDragAndDrop

View.startDragAndDrop() — API 24 (Android 7.0) سے دستیاب ڈریگ شروع کرنے کا Android SDK طریقہ ہے۔ یہ عنصر پکڑنے کے بعد (عام طور پر onLongClick میں) کال کیا جاتا ہے۔ پیرامیٹرز: ClipData (ڈیٹا)، DragShadowBuilder (بصری سایہ)، Object myLocalState (مقامی حالت)، flags۔ DragShadowBuilder ایک Bitmap بناتا ہے جو انگلی کا پیچھا کرتا ہے۔ سسٹم ڈریگ کے دوران خود بخود حرکت پذیریوں اور ٹچ ایونٹس کا انتظام کرتا ہے۔

// دوبارہ ترتیب دینے کے ساتھ RecyclerView عنصر کا ڈریگ اور ڈراپ
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 to reorder) — سب سے عام DnD منظر نامہ: صارف اپنی ترتیب بدلنے کے لیے فہرست کے آئٹمز گھسیٹتے ہیں۔ مثالیں: پسندیدہ میں رابطوں کو دوبارہ ترتیب دینا، ٹریکرز (Trello، Todoist) میں کاموں کو ترتیب دینا، پلے لسٹ میں ٹریکس کو دوبارہ ترتیب دینا (Spotify، Apple Music)۔ Android میں ItemTouchHelper یا iOS میں UILongPressGestureRecognizer + سیل دوبارہ ترتیب دینے کے ذریعے لاگو کیا جاتا ہے۔

فائل مینیجرز — فولڈرز کے درمیان فائلوں کو کاپی اور منتقل کرنے کے لیے ڈریگ اور ڈراپ۔ iOS Files App، Android Files by Google، Dropbox — سب DnD کو سپورٹ کرتے ہیں۔ کسی فائل کو فولڈر پر گھسیٹنا اسے اندر منتقل کرتا ہے (move)، Option/Ctrl دبائے گھسیٹنا کاپی کرتا ہے (copy)۔ ڈراپ ٹارگٹ ہوور کرنے پر بصری طور پر نمایاں ہوتا ہے، فولڈر کی حدود دکھاتا ہے۔

کینبان بورڈز — Trello، Jira، Notion کارڈز کو کالموں کے درمیان منتقل کرنے کے لیے ڈریگ اور ڈراپ استعمال کرتے ہیں (To Do → In Progress → Done)۔ گھسیٹتے وقت، کارڈ اپنے ماخذ کالم سے الگ ہو جاتا ہے، انگلی کا پیچھا کرتا ہے اور دوسرے کالم کی حد عبور کرتے وقت حرکت پذیری کے ساتھ داخل ہو جاتا ہے۔ iOS 11+ parallax اثر کے ساتھ UIDragPreview کو سپورٹ کرتا ہے، جہاں پیش نظارہ ٹچ پوائنٹ سے ہلکا سا جھک جاتا ہے، گہرائی پیدا کرتا ہے۔

Springboard حصے (iOS) — iOS ہوم اسکرین پر ایپ آئیکنز کو گھسیٹنا۔ ایک آئیکن پر لمبا دباؤ “ہلانے” کے موڈ کو فعال کرتا ہے (آئیکن ہلتے ہیں)، جس کے بعد صارف صفحات کے درمیان آئیکن منتقل کر سکتا ہے اور فولڈر بنا سکتا ہے۔ یہ سب سے پیچیدہ DnD UX پیٹرن میں سے ایک ہے کیونکہ اس کے لیے ڈریگنگ، ہلانے کی حرکت پذیری اور فولڈر گروپنگ کو بیک وقت سنبھالنے کی ضرورت ہوتی ہے۔

ڈریگ اور ڈراپ کے لیے UX تجاویز

بصری فیڈ بیک — ڈریگ اور ڈراپ کے لیے انتہائی اہم ہے۔ گھسیٹا گیا آبجیکٹ تبدیل ہونا چاہیے: سکڑنا (iOS: اسکیل 0.8–0.9)، نیم شفاف ہونا (الفا 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 استعمال کرتے ہیں — معیاری بٹنوں کے ذریعے رسائی کے ساتھ۔