HTML मोबाइल उपकरणों पर खींचें और छोड़ें

Question

जब आप जावास्क्रिप्ट का उपयोग करके किसी वेब पेज पर ड्रैग और ड्रॉप जोड़ते हैं, जैसे कि jQuery UI ड्रैगेबल और ड्रापेबल, मोबाइल डिवाइस पर ब्राउज़र के माध्यम से देखे जाने पर आपको यह कैसे काम करना है - जहां ड्रैगिंग के लिए टच-स्क्रीन क्रियाओं को इंटरसेप्ट किया जाता है पेज आदि पर स्क्रॉल करने के लिए फोन?

सभी समाधानों का स्वागत है ... मेरे शुरुआती विचार हैं:

1. मोबाइल उपकरणों के लिए एक बटन है जो आइटम को "लिफ्ट" करता है और फिर उस आइटम पर ड्रॉप करने के लिए इच्छित ज़ोन पर क्लिक करने के लिए उन्हें प्राप्त करें।

2. एक ऐप लिखें, जो मोबाइल उपकरणों के लिए ऐसा करता है, फिर कोशिश करें और उन पर काम करने के लिए वेब पेज प्राप्त करें!

3. आपके सुझाव और टिप्पणियाँ कृपया।

Comments

आप किन उपकरणों को लक्षित कर रहे हैं?

— Marko

@ मर्को - उन सभी को। यह वेब नहीं है अगर मैं किसी को बाहर करता हूं।

— फेंटन

यदि आप jQuery बिल्कुल नहीं चाहते हैं, तो इस github.com/capriza/mobile-touch

— oriharel

Answer 1

jQuery यूआई टच पंच बस यह सब हल करती है।

यह jQuery UI के लिए एक टच इवेंट सपोर्ट है। असल में, यह सिर्फ jQuery UI के लिए वापस घटना स्पर्श तारों। IPad, iPhone, Android और अन्य टच-सक्षम मोबाइल उपकरणों पर परीक्षण किया गया। मैंने jQuery UI सॉर्टेबल का उपयोग किया है और यह एक आकर्षण की तरह काम करता है।

http://touchpunch.furf.com/

Comments

स्टॉक एंड्रॉइड 4.0 ब्राउज़र पर काम नहीं करता है। हालांकि यह मोबाइल क्रोम पर काम करता है।

— टिम्मम्म

क्या हमें ड्रैग करने से पहले सबसे पहले प्रेस करना है? क्योंकि जब हम उस तत्व को पूरी चौड़ाई में इस्तेमाल करते हैं जो सक्षम है तो हम इसे नीचे तक स्क्रॉल करना चाहते हैं स्वचालित रूप से तत्व को खींचता है

— कैफीनशॉट्स

यह सुनिश्चित करें कि यह आपके HTML फ़ाइल के सिर में आपकी आखिरी <स्क्रिप्ट> घोषणा है, विशेष रूप से jquery-ui, या यह काम नहीं करेगा

— Whyoz

@vichsu इस उत्तर के लिए बहुत बहुत धन्यवाद, जिसने मेरी समस्या को पूरी तरह से हल कर दिया।

— ब्रैडी झू

वास्तव में एंड्रॉइड 4.0 में काम नहीं कर रहा है .. या आसपास कोई काम है?

— rashidnk

Answer 2

खींचें और ड्रॉप करने के लिए स्पर्श घटनाओं के अनुवाद के लिए एक नया पॉलीफ़िल है, जैसे कि एचटीएमएल 5 ड्रैग एंड ड्रॉप मोबाइल पर उपयोग करने योग्य है।

इस पद पर बर्नार्डो कैस्टिलो द्वारा पॉलीफ़िल की शुरुआत की गई थी ।

यहां उस पोस्ट का डेमो दिया गया है।

पोस्ट फोलिफ़िल डिज़ाइन के कई विचार भी प्रस्तुत करता है।

Answer 3

स्नेहा टच के बीटा संस्करण में ड्रैग एंड ड्रॉप सपोर्ट है।

आप उनके डीएनडी उदाहरण का उल्लेख कर सकते हैं । यह केवल वेबकिट ब्राउज़र पर काम करता है।

उस तर्क को एक वेब पेज में बदलना शायद मुश्किल होने वाला है। जैसा कि मैंने समझा कि वे सभी ब्राउज़र पैनिंग को निष्क्रिय कर देते हैं और पूरी तरह से जावास्क्रिप्ट में पैनिंग घटनाओं को लागू करते हैं, जिससे ड्रैग और ड्रॉप की सही व्याख्या हो सकती है।

अपडेट: मूल उदाहरण लिंक मृत है, लेकिन मुझे यह विकल्प मिला:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Comments

यह बहुत दिलचस्प है, इसलिए मैं इसे डाउनलोड करूंगा और एक नाटक करूंगा - एंड्रॉइड पर परीक्षण किया गया और यह ज्यादातर काम करता है, इसलिए केवल विवरणों को देखने की आवश्यकता है - धन्यवाद!

— फेंटन

ठीक है, मैं शायद उस पुस्तकालय का विशेष रूप से उपयोग नहीं करूँगा (जब यह छोटा हो तो 200k से अधिक हो), लेकिन मैं इस तरह के विचारों को प्राप्त करने के लिए इसके भीतर निहित अवधारणाओं का उपयोग कर सकता हूं। सामान्य विचार यह है कि आप अपने पृष्ठ को स्क्रीन के आकार से अधिक नहीं समझा जा सकता है, जो मोबाइल ब्राउज़र को स्वाइप / ड्रैग को बाधित नहीं करने में मूर्ख बनाता है!

— फेंटन

सोहनी, हम टच 1.0 के लिए एक बिल्डर जोड़ रहे हैं जो पुस्तकालय के अप्रयुक्त भागों को स्ट्रिप्स करता है, इससे पदचिह्न काफी हद तक नीचे मिल जाएगा। इसके अलावा, gzipped, पूर्ण पुस्तकालय 50-80k है।

— माइकल मुल्नी

Answer 4

मुझे एक ड्रैग एंड ड्रॉप + रोटेशन बनाने की जरूरत थी जो विंडोज़ फोन सहित डेस्कटॉप, मोबाइल, टैबलेट पर काम करता हो। पिछले एक ने इसे और अधिक जटिल बना दिया (mspointer बनाम स्पर्श घटनाओं)।

इसका समाधान द ग्रेट ग्रीनस्क लाइब्रेरी से आया है

उसी वस्तु को खींचने योग्य और सड़ने योग्य बनाने के लिए हुप्स के माध्यम से कुछ कूदता है लेकिन यह पूरी तरह से काम करता है

Comments

लाइसेंस के प्रकार? नि: शुल्क? मैंने साइट की जाँच की, लेकिन ऐसा लगता है कि वे पुस्तकालय को बेच रहे हैं।

— ShanerM13

मुझे इसका उत्तर देते हुए 6 साल हो गए हैं। मुझे यकीन नहीं है कि उन्होंने अपना लाइसेंस प्रकार बदल दिया है। यह 2014 में मुक्त हुआ करता था ...

— तोमर अल्मोग

IDK मैंने इसे कैसे अनदेखा किया, लेकिन greensock.com/licensing

— ShanerM13

मूल रूप से, यह मुफ़्त है कि आपका उत्पाद मुफ़्त है (इस अपवाद के साथ कि वे एक बार शुल्क लगाने की अनुमति देते हैं), अन्य बुद्धिमान, आपको उनके साथ एक व्यवसाय लाइसेंस प्राप्त करना होगा।

— ShanerM13

Answer 5

आप टिम रफल के ड्रैग-एन-ड्रॉप पॉलीफिल के लिए एक कोशिश दे सकते हैं , निश्चित रूप से बर्नार्डो कैस्टिलो के एक (@remdevtec उत्तर देखें) के समान है।

बस npm install mobile-drag-drop --save(अन्य इंस्टॉलेशन के तरीके उपलब्ध हैं, जैसे कि बोवर के साथ)

फिर, टच डिटेक्शन पर निर्भर किसी भी तत्व इंटरफ़ेस को मोबाइल पर काम करना चाहिए (उदाहरण के लिए स्क्रॉल करने के बजाय केवल एक तत्व को खींचना)।

Answer 6

Jquery टच पंच महान है लेकिन यह भी करता है कि ड्रैग करने योग्य div पर सभी नियंत्रणों को अक्षम कर दिया गया है ताकि इसे रोकने के लिए आपको लाइनों को बदलना पड़े ... (लिखने के समय - लाइन 75)

परिवर्तन

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

पढ़ने के लिए

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

जितने भी तत्व आप 'अनलॉक' करना चाहते हैं, उनमें से प्रत्येक के लिए उतने ही ओआरएस जोड़ें

आशा है कि किसी की मदद करता है

Comments

यह सबसे निश्चित रूप से मेरी मदद करता है, धन्यवाद। मैं एक छांटने योग्य चेकलिस्ट बना रहा था और टिक बॉक्स क्लिक नहीं कर रहा था क्योंकि टच-पंच द्वारा बनाई गई डिव चेकबॉक्स को कवर कर रही थी। इससे यह हल हुआ और इसने काम किया। धन्यवाद ....

— मिकीस 4u

Answer 7

यहाँ मेरा समाधान है:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});

Answer 8

क्रमित करने योग्य जे एस पुस्तकालय टच स्क्रीन के साथ संगत है और jQuery आवश्यकता नहीं है।

जिस तरह से यह टच स्क्रीन को हैंडल करता है, वह आपको आइटम को खींचने के लिए स्क्रीन को लगभग 1 सेकंड के लिए टच करने की आवश्यकता होती है।

इसके अलावा, वे यह दिखाते हुए एक वीडियो परीक्षण प्रस्तुत करते हैं कि यह लाइब्रेरी JQuery UI सॉर्टेबल से अधिक तेज़ी से चल रही है।