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 চেপে টেনে নিলে কপি হয়। ড্রপ টার্গেট hover করলে দৃশ্যমানভাবে হাইলাইট হয়, ফোল্ডারের সীমানা দেখায়।

কানবান বোর্ড — 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)। ড্রপ টার্গেটের hover এ দৃশ্যমানভাবে প্রতিক্রিয়া জানানো উচিত: হাইলাইট, প্রসারিত বা সীমানা দেখানো। এই সংকেত ছাড়া, ব্যবহারকারী বুঝতে পারে না কোথায় তারা অবজেক্ট ফেলতে পারে।

ফেরত অ্যানিমেশন (ড্র্যাগ বাতিল) — যদি ব্যবহারকারী ড্রপ জোনের বাইরে বা অবৈধ জোনে উপাদান ছেড়ে দেয়, অবজেক্টটি অ্যানিমেটেডভাবে তার মূল অবস্থানে ফিরে আসা উচিত। 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 ব্যবহার করে — স্ট্যান্ডার্ড বোতামের মাধ্যমে অ্যাক্সেস সহ।