खींचें और छोड़ें

Jetpack Compose में दो मॉडिफ़ायर का इस्तेमाल करके खींचें और छोड़ें सुविधा मौजूद है:

  • dragAndDropSource: यह जेस्चर के शुरुआती पॉइंट के तौर पर एक कंपोज़ेबल तय करता है
  • dragAndDropTarget: इससे ऐसा कंपोज़ेबल तय होता है जो हटाए गए डेटा को स्वीकार करता है

उदाहरण के लिए, उपयोगकर्ताओं को आपके ऐप्लिकेशन में कोई इमेज खींचकर छोड़ने की सुविधा देने के लिए, कोई ऐसी इमेज बनाएं जिसका इस्तेमाल किया जा सके. साथ ही, dragAndDropSource मॉडिफ़ायर जोड़ें. ड्रॉप टारगेट सेट अप करने के लिए, दूसरी इमेज कंपोज़ेबल बनाएं और dragAndDropTarget मॉडिफ़ायर जोड़ें.

मॉडिफ़ायर कई ड्रैग सोर्स और कई ड्रॉप टारगेट पर लागू किए जा सकते हैं.

मॉडिफ़ायर की मदद से ऐप्लिकेशन, ClipData का इस्तेमाल करके दो या उससे ज़्यादा कंपोज़ेबल के बीच डेटा शेयर कर सकते हैं. View को लागू करने के साथ ही यह इंटरऑपर भी किया जा सकता है.

ड्रैग सोर्स तय करें

किसी कॉम्पोनेंट में इवेंट खींचने और छोड़ने के लिए, dragAndDropSource मॉडिफ़ायर जोड़ें. यह फ़ंक्शन को पैरामीटर के तौर पर लेता है. इस फ़ंक्शन में, ट्रांसफ़र किए जा सकने वाले डेटा को दिखाने के लिए, DragAndDropTransferData का इस्तेमाल करें. डेटा एक रिमोट यूआरआई, क्लिपबोर्ड पर रिच टेक्स्ट डेटा, लोकल फ़ाइल वगैरह हो सकता है, लेकिन उन सभी को ClipData ऑब्जेक्ट में रैप करना ज़रूरी है. सादा टेक्स्ट डालें. उदाहरण के लिए, ऐसा इस तरह करें:

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        startTransfer(
            DragAndDropTransferData(
                ClipData.newPlainText(
                    "image Url", url
                )
            )
        )
    })
}
DragAndDropSnippets.kt

खींचकर छोड़ने की कार्रवाई को ऐप्लिकेशन के बॉर्डर से बाहर करने के लिए, DragAndDropTransferData कंस्ट्रक्टर, flags आर्ग्युमेंट को स्वीकार करता है. यहां दिए गए उदाहरण में, DRAG_FLAG_GLOBAL कॉन्सटेंट से पता चलता है कि डेटा को एक ऐप्लिकेशन से दूसरे ऐप्लिकेशन में खींचा जा सकता है:

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        startTransfer(
            DragAndDropTransferData(
                ClipData.newPlainText(
                    "image Url", url
                ),
                flags = View.DRAG_FLAG_GLOBAL
            )
        )
    })
}
DragAndDropSnippets.kt

DragAndDropTransferData, Android View सिस्टम के साथ काम करने वाले फ़्लैग स्वीकार करता है. उपलब्ध फ़्लैग की पूरी सूची के लिए देखें कॉन्सटेंट की सूची देखें.

ड्रॉप का डेटा पाएं

किसी कंपोज़ेबल को dragAndDropTarget मॉडिफ़ायर असाइन करें, ताकि कंपोज़ेबल को खींचकर छोड़ने वाले इवेंट मिल सकें. मॉडिफ़ायर में दो पैरामीटर होते हैं: पहला, फ़िल्टर के तौर पर काम करता है और इससे तय होता है कि मॉडिफ़ायर किस तरह का डेटा स्वीकार कर सकता है और दूसरा पैरामीटर, कॉलबैक में डेटा को डिलीवर करता है.

ध्यान दें कि कॉलबैक इंस्टेंस याद रखा जाना चाहिए. नीचे दिया गया स्निपेट, कॉलबैक को याद रखने का तरीका बताता है:

val callback = remember {
    object : DragAndDropTarget {
        override fun onDrop(event: DragAndDropEvent): Boolean {
            // Parse received data
            return true
        }
    }
}
DragAndDropSnippets.kt

अगले स्निपेट में, छूटे हुए सादे टेक्स्ट को मैनेज करने का तरीका बताया गया है:

Modifier.dragAndDropTarget(
    shouldStartDragAndDrop = { event ->
        event.mimeTypes().contains(ClipDescription.MIMETYPE_TEXT_PLAIN)
    }, target = callback
)
DragAndDropSnippets.kt

अगर इवेंट इस्तेमाल किया जा रहा है, तो कॉलबैक फ़ंक्शन को true दिखाना चाहिए या अगर इवेंट अस्वीकार कर दिया जाता है और पैरंट कॉम्पोनेंट में नहीं दिखता है, तो false दिखाना चाहिए.

'खींचें और छोड़ें' इवेंट मैनेज करना

DragAndDropTarget इंटरफ़ेस में कॉलबैक को बदलें, ताकि यूज़र इंटरफ़ेस (यूआई) और ऐप्लिकेशन के काम करने के तरीके को सटीक कंट्रोल करने के लिए, ड्रैग-ऐंड-ड्रॉप इवेंट शुरू होने, खत्म होने या किसी कॉम्पोनेंट में शामिल होने या उससे बाहर निकलने का समय पता चले:

object : DragAndDropTarget {
    override fun onStarted(event: DragAndDropEvent) {
        // When the drag event starts
    }

    override fun onEntered(event: DragAndDropEvent) {
        // When the dragged object enters the target surface
    }

    override fun onEnded(event: DragAndDropEvent) {
        // When the drag event stops
    }

    override fun onExited(event: DragAndDropEvent) {
        // When the dragged object exits the target surface
    }

    override fun onDrop(event: DragAndDropEvent): Boolean = true
}
DragAndDropSnippets.kt

अन्य संसाधन

कोडलैब (कोड बनाना सीखना): Compose में खींचें और छोड़ें