Drag-and-Drop — esensya, Drag and Drop sa mga mobile application

Ano ang Drag-and-Drop?

Drag-and-Drop (DnD, i-drag at i-drop) — paraan ng pagmamanipula ng mga graphic na elemento ng interface kung saan kinukuha ng user ang isang bagay gamit ang daliri o mouse, inililipat ito sa ibang posisyon at binibitawan. Sa mga mobile interface, ang Drag-and-Drop ay karaniwang sinisimulan sa pamamagitan ng matagal na pagpindot (Long Press) — hinahawakan ng user ang elemento nang 300–500 ms, pagkatapos ay inililipat ng system ang interface sa mode ng pag-drag, at ang paggalaw ng daliri ang nagdadala ng bagay.

Sa kasaysayan, lumitaw ang Drag-and-Drop sa mga desktop interface (Xerox Star, 1981; Macintosh, 1984) bilang alternatibo sa mga command na kopyahin/i-paste. Sa mga mobile platform, lumitaw ang buong suporta sa iOS 11 (2017) kasama ang UIDragInteraction at sa Android 7.0 (2016) kasama ang Multi-Window Drag-and-Drop. Bago ito, ang pag-drag sa mga mobile application ay ipinapatupad sa pamamagitan ng custom na mga solusyon gamit ang gesture recognizers.

Mga pangunahing konsepto: drag session (session ng pag-drag), drag items (mga bagay na na-drag), drag preview (biswal na imahe ng bagay), drop target (zone ng pagbagsak), drop proposal (aksyon sa pagbagsak: ilipat, kopyahin, i-link). Pinamamahalaan ng system ang session sa antas ng operating system, na nagpapahintulot sa pag-drag ng mga bagay sa pagitan ng iba’t ibang mga application (hal., larawan mula sa Gallery patungo sa Notes).

Mga Yugto ng Drag-and-Drop

Drag-and-Drop ay nahahati sa tatlong magkakasunod na yugto. Yugto 1 — pagkuha (Drag Start): sinisimulan ng user ang kilos (karaniwang Long Press), lumilikha ang system ng isang session ng pag-drag, kinukuha ang data ng bagay at ipinapakita ang drag preview — isang semi-transparent na kopya ng elemento na sumusunod sa daliri. Sa yugtong ito, tinatanggihan ng system ang iba pang mga kilos (pag-scroll, pagpili ng teksto) hanggang matapos ang DnD.

Yugto 2 — paggalaw (Drag Move): gumagalaw ang daliri sa screen, sinusundan ng drag preview ang punto ng pagpindot. Patuloy na tinutukoy ng system ang drop target sa ilalim ng daliri at nagpapadala ng mga kaganapang drag enter, drag move at drag exit. Ang drop target ay maaaring tumugon nang biswal: mag-ilaw, lumawig o magpakita ng linya ng insertion. Ang yugtong ito ay tumatagal mula 0.5 hanggang 10+ segundo depende sa pagiging kumplikado ng gawain.

Yugto 3 — pagbitaw (Drop): ang daliri ay inaalis sa screen. Tinatapos ng system ang session ng pag-drag at tinatawagan ang drop callback sa target na elemento. Kung tinanggihan ng drop target ang pagbagsak (hal., pag-drag ng file sa isang folder na walang pahintulot sa pagsulat), ang drag preview ay bumalik nang may animasyon sa orihinal na posisyon (cancel animation). Kung tinanggap ang pagbagsak, nawawala ang elemento mula sa orihinal na posisyon at lumilitaw sa target na posisyon.

Pag-drag sa pagitan ng mga application — tampok na magagamit sa parehong platform. Sinusuportahan ng iOS ang Drag-and-Drop sa pagitan ng mga application sa Split View at Slide Over mode (iPad). Sinusuportahan ng Android ang pag-drag sa pagitan ng mga application sa Split Screen mode. Ang data ay inililipat sa pamamagitan ng UIPasteConfiguration (iOS) o ClipData (Android). Tinutukoy ng developer ang mga suportadong uri ng data (UTI para sa iOS, MIME para sa Android).

Drag-and-Drop sa iOS: UIDragInteraction

UIDragInteraction — pangunahing API ng iOS para sa pag-drag, idinagdag sa iOS 11. Upang paganahin ang pag-drag mula sa View, magdagdag ng UIDragInteraction na may UIDragInteractionDelegate. Tinutukoy ng delegado kung aling mga elemento ang na-drag, ang kanilang hitsura at pag-uugali. Para sa pagtanggap ng mga elemento, ginagamit ang UIDropInteraction na may UIDropInteractionDelegate, na tumutukoy kung maaaring tanggapin ng View ang pagbagsak at kung paano iproseso ang data.

// UIDragInteraction — pag-drag ng elemento mula sa koleksyon
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 — pinababang kopya ng elemento
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate — salamin na interface para sa pagtanggap ng pagbagsak. Ang pamamaraang canHandle(_:) ay sumusuri kung ang uri ng data ay suportado. Ang sessionDidUpdate(_:) ay biswal na nag-a-update ng estado (pag-iilaw, linya ng insertion). Ang performDrop(_:) ay nagsasagawa ng panghuling pagproseso ng data. Awtomatikong tinatawagan ng iOS ang UIDropProposal na may uri ng operasyon: .move (ilipat), .copy (kopyahin), .forbidden (bawal). Ang uri ng operasyon ay nakakaapekto sa biswal na pagpapakita (icon + sa sulok ng preview para sa pagkopya, tanda ng bawal para sa forbidden).

Drag-and-Drop sa Android: startDragAndDrop

View.startDragAndDrop() — pamamaraan ng Android SDK para simulan ang pag-drag, magagamit mula sa API 24 (Android 7.0). Tinatawag pagkatapos makuha ang elemento (karaniwang sa onLongClick). Mga parameter: ClipData (data), DragShadowBuilder (biswal na anino), Object myLocalState (lokal na estado), flags. Ang DragShadowBuilder ay lumilikha ng Bitmap na sumusunod sa daliri. Awtomatikong pinamamahalaan ng system ang animasyon at mga kaganapan sa pagpindot sa panahon ng pag-drag.

// Drag-and-Drop ng elemento ng RecyclerView na may muling pag-aayos
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // Gumagawa ng ClipData para sa paglilipat ng data
            val clipData = ClipData.newPlainText("item", items[position])

            // Custom na DragShadowBuilder na may pinababang preview
            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
        }
    }
}

Pagtanggap ng pagbagsak sa Android ay ipinapatupad sa pamamagitan ng View.setOnDragListener(). Ang tagapakinig ay tumatanggap ng mga kaganapang ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP, ACTION_DRAG_ENDED. Sa kaganapang ACTION_DROP, ang data ay kinukuha mula sa ClipData at isinasagawa ang target na aksyon. Para sa RecyclerView na may muling pag-aayos, inirerekomenda ang ItemTouchHelper.SimpleCallback — isang built-in na mekanismo na awtomatikong humahawak ng Long Press para sa pagkuha, animasyon ng paggalaw ng mga elemento at mga pamamaraang pantulong na onMove/onSwiped.

Mga Sitwasyon ng Paggamit ng Drag-and-Drop

Muling pag-aayos ng listahan (drag to reorder) — pinakakaraniwang sitwasyon ng DnD: hinihila ng user ang mga elemento ng listahan upang baguhin ang kanilang pagkakasunud-sunod. Mga halimbawa: muling pagsasaayos ng mga contact sa paborito, pag-uuri ng mga gawain sa mga tracker (Trello, Todoist), pagbabago ng pagkakasunud-sunod ng mga track sa playlist (Spotify, Apple Music). Ipinapatupad sa pamamagitan ng ItemTouchHelper sa Android o UILongPressGestureRecognizer + muling pagsasaayos ng mga cell sa iOS.

Mga tagapamahala ng file — Drag-and-Drop para sa pagkopya at paglipat ng mga file sa pagitan ng mga folder. iOS Files App, Android Files by Google, Dropbox — lahat ay sumusuporta sa DnD. Ang pag-drag ng file papunta sa isang folder ay inililipat ito sa loob (move), ang pag-drag gamit ang nakapindot na Option/Ctrl key ay kinokopya ito (copy). Ang drop target ay biswal na nag-iilaw kapag nilapitan, na nagpapakita ng mga hangganan ng folder.

Mga board ng Kanban — Trello, Jira, Notion ay gumagamit ng Drag-and-Drop upang ilipat ang mga card sa pagitan ng mga column (To Do → In Progress → Done). Sa panahon ng pag-drag, ang card ay humihiwalay mula sa pinagmumulan na column, sumusunod sa daliri, at kapag tumawid sa hangganan ng ibang column ay ipinasok na may animasyon. Sinusuportahan ng iOS 11+ ang UIDragPreview na may parallax effect, kung saan ang preview ay bahagyang lumilihis mula sa punto ng pagpindot, na lumilikha ng lalim.

Mga seksyon ng Springboard (iOS) — pag-drag ng mga icon ng application sa home screen ng iOS. Ang matagal na pagpindot sa isang icon ay nag-a-activate ng “jiggling” mode (nanginginig ang mga icon), pagkatapos ay maaaring ilipat ng user ang mga icon sa pagitan ng mga pahina at lumikha ng mga folder. Ito ay isa sa mga pinaka-komplikadong pattern ng UX ng DnD dahil nangangailangan ito ng sabay-sabay na paghawak ng pag-drag, animasyon ng panginginig at pagpapangkat sa mga folder.

Mga Rekomendasyon sa UX para sa Drag-and-Drop

Balikang biswal — kritikal para sa Drag-and-Drop. Ang na-drag na bagay ay dapat magbago: lumiit (iOS: scale 0.8–0.9), maging semi-transparent (alpha 0.7–0.8) at tumaas sa itaas ng interface na may anino (shadow offset). Ang drop target ay dapat tumugon nang biswal sa paglapit: mag-ilaw (highlight), lumawig (expand) o magpakita ng mga hangganan (border). Kung wala ang mga senyas na ito, hindi nauunawaan ng user kung saan maaaring ihulog ang bagay.

Animasyon ng pagbabalik (drag cancel) — kung bitawan ng user ang elemento sa labas ng drop zone o sa itaas ng hindi wastong zone, ang bagay ay dapat bumalik nang may animasyon sa orihinal na posisyon. Ang iOS UIDragInteractionDelegate ay nagbibigay ng dragInteraction(_:sessionDidMove:) para sa pagsubaybay at dragInteraction(_:session:willEndWith:) para sa animasyon ng pagbabalik. Ang Android View.setOnDragListener ay tumatanggap ng ACTION_DRAG_ENDED, kung saan maaaring simulan ang animasyon ng pagbabalik sa pamamagitan ng ValueAnimator o ObjectAnimator.

Pagiging naa-access: ang mga user na may limitasyon sa motor ay maaaring hindi magawa ang kilos ng pag-drag. Magbigay ng mga alternatibo sa pamamagitan ng mga button na “Ilipat pataas/pababa” para sa mga listahan, menu ng konteksto na “Ilipat sa folder” para sa mga file. Ang iOS VoiceOver ay sumusuporta sa rotor action na “Drag” para sa paglipat ng mga elemento. Ang Android TalkBack ay nagbibigay ng custom na mga aksyon sa pamamagitan ng AccessibilityNodeInfo.addAction(). Ang Nike Run Club at Apple Health ay gumagamit ng DnD para sa muling pagsasaayos ng mga metrik sa dashboard — na may access sa pamamagitan ng standard na mga button.