दिलचस्प पोस्ट
jQuery के jqGrid एक संपादन पंक्ति पूर्ण होने पर संदेश दिखाएं जावा: त्रुटि: चर शुरू नहीं किया गया हो सकता है पायथन पता पहले से उपयोग में है सर्वलेट jsp के लिए Servlet.service () क्यों इस अपवाद को फेंक दिया? दो नंबरों के बीच UILabel पाठ को चेतन करें? jQuery: "संख्या" प्रतिबंधित करने का सबसे अच्छा तरीका क्या है पाठ बॉक्स के लिए केवल इनपुट? (दशमलव अंक की अनुमति दें) एचटीएमएल टेबल हेडर हमेशा एक बड़े टेबल को देखते हुए खिड़की के शीर्ष पर दिखाई देते हैं डेटा एक्सेस के बाद सी # में Excel आवेदन प्रक्रिया बंद करना Qt, GCD- शैली में किसी दिए गए धागे में एक मजेदार या लैम्ब्डा को कैसे निष्पादित करें? जावा 8 स्ट्रीम एपीआई में गिनती करके समूह .NET में प्रारूप स्ट्रिंग में ब्रेसिज़ (घुंघराले ब्रैकेट) से बचने के लिए कैसे करें AudioSessionSetProperty का उपयोग किए बिना मैं कैसे ऑडियो स्पीकर को रूट करूं? अजगर: बिना यूनिकोड यूनिकोड को एएससीआई के लिए परिवर्तित करें सीएसएस: चौड़ाई / ऊंचाई की स्थापना प्रतिशत शून्य से पिक्सल के रूप में दस्तावेज़ के बिना एक HTML पृष्ठ में जावास्क्रिप्ट चर को कैसे प्रदर्शित करें

टचस्क्रीन के लिए मैं एक jQuery UI 'ड्रैगगैबल ()' डिवा ड्रैग करने योग्य कैसे बना सकता हूं?

मेरे पास एक jQuery UI draggable() जो फ़ायरफ़ॉक्स और क्रोम में काम करता है। उपयोगकर्ता इंटरफ़ेस की अवधारणा मूल रूप से "पोस्ट-इ" प्रकार वस्तु बनाने के लिए क्लिक की जाती है।

असल में, मैं क्लिक या div#everything (100% उच्च और चौड़ी) पर टैप करता हूं, जो क्लिक के लिए सुनता है, और एक इनपुट टेपटेरा प्रदर्शित करता है। आप पाठ जोड़ते हैं, और तब जब आप इसे कर रहे हैं, तो इसे बचाता है। आप इस तत्व को लगभग खींच सकते हैं। यह सामान्य ब्राउज़रों पर काम कर रहा है, लेकिन एक आईपैड पर मैं परीक्षण कर सकता हूँ, मैं वस्तुओं को चारों ओर खींच नहीं सकता। अगर मैं चुनने के लिए स्पर्श करता हूँ (यह फिर थोड़ा मंद होता है), तो मैं उसे खींच नहीं सकता। यह बाएं या दाएं बिल्कुल भी खींच नहीं करेगा। मैं ऊपर या नीचे खींच सकता हूं, लेकिन मैं व्यक्तिगत div खींच नहीं रहा हूं, मैं पूरे वेबपेज को खींच रहा हूं

तो यहां क्लिक करने पर मैं कोड का उपयोग करता हूं:

 $('#everything').bind('click', function(e){ var elem = document.createElement('DIV'); STATE.top = e.pageY; STATE.left = e.pageX; var e = $(elem).css({ top: STATE.top, left: STATE.left }).html('<textarea></textarea>') .addClass('instance') .bind('click', function(event){ return false; }); $(this).append(e); }); 

और यहां का कोड है जो मैं नोट को "सहेजें" और इनपुट डिवा में सिर्फ एक डिस्प्ले को चालू करने के लिए उपयोग करता हूं:

 $('textarea').live('mouseleave', function(){ var val = jQuery.trim($(this).val()); STATE.content = val; if (val == '') { $(this).parent().remove(); } else { var div = $(this).parent(); div.text(val).css({ height: '30px' }); STATE.height = 30; if ( div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight ) { while (div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight) { var h = div.height() + 10; STATE.height = h; div.css({ height: (h) + 'px' }); // element just got scrollbars } } STATE.guid = uniqueID() div.addClass('savedNote').attr('id', STATE.guid).draggable({ stop: function() { var offset = $(this).offset(); STATE.guid = $(this).attr('id'); STATE.top = offset.top; STATE.left = offset.left; STATE.content = $(this).text(); STATE.height = $(this).height(); STATE.save(); } }); STATE.save(); $(this).remove(); } }); 

और जब मैं सहेजे गए नोट्स के लिए पेज लोड करता हूं, तो मुझे यह कोड होता है:

 $('.savedNote').draggable({ stop: function() { STATE.guid = $(this).attr('id'); var offset = $(this).offset(); STATE.top = offset.top; STATE.left = offset.left; STATE.content = $(this).text(); STATE.height = $(this).height(); STATE.save(); } }); 

मेरा STATE ऑब्जेक्ट नोट्स को सहेजता है

ओलोड, यह संपूर्ण एचटीएमएल शरीर है:

 <body> <div id="everything"></div> <div class="instance savedNote" id="iddd1b0969-c634-8876-75a9-b274ff87186b" style="top:134px;left:715px;height:30px;">Whatever dude</div> <div class="instance savedNote" id="id8a129f06-7d0c-3cb3-9212-0f38a8445700" style="top:131px;left:347px;height:30px;">Appointment 11:45am</div> <div class="instance savedNote" id="ide92e3d13-afe8-79d7-bc03-818d4c7a471f" style="top:144px;left:65px;height:80px;">What do you think of a board where you can add writing as much as possible?</div> <div class="instance savedNote" id="idef7fe420-4c19-cfec-36b6-272f1e9b5df5" style="top:301px;left:534px;height:30px;">This was submitted</div> <div class="instance savedNote" id="id93b3b56f-5e23-1bd1-ddc1-9be41f1efb44" style="top:390px;left:217px;height:30px;">Hello world from iPad.</div> </body> 

तो, मेरा सवाल वाकई है: मैं इस काम को आईपैड पर बेहतर कैसे बना सकता हूं?

मैं jQuery UI पर सेट नहीं हूं, मैं सोच रहा हूं कि यह कुछ है जो मैं jQuery UI या jQuery के साथ गलत कर रहा हूं या क्रॉस-प्लेटफॉर्म / पिछड़े संगत ड्रैगएबल () तत्वों को करने के लिए बेहतर फ्रेमवर्क हो सकता है या नहीं टचस्क्रीन यूआई के लिए काम

यूआई घटकों को लिखने के तरीके के बारे में और सामान्य टिप्पणियां भी इस तरह से स्वागत होगी।

धन्यवाद!


अद्यतन: मैं बस अपने jQuery UI draggable() कॉल पर यह चेन और iPad पर सही draggability प्राप्त करने में सक्षम था!

 .touch({ animate: false, sticky: false, dragx: true, dragy: true, rotate: false, resort: true, scale: false }); 

JQuery टच प्लगइन चाल किया!

वेब के समाधान से एकत्रित समाधान "टचस्क्रीन के लिए मैं एक jQuery UI 'ड्रैगगैबल ()' डिवा ड्रैग करने योग्य कैसे बना सकता हूं?"

कई घंटे बर्बाद करने के बाद, मैं इस पर आया था!

jQuery ui को स्पर्श-पंच

यह क्लिक ईवेंट के रूप में नल ईवेंट का अनुवाद करता है Jquery के बाद स्क्रिप्ट लोड करने के लिए याद रखें

मुझे आईपैड और आईफोन पर काम करना पड़ा

 $('#movable').draggable({containment: "parent"}); 

सावधानी: यह उत्तर 2010 में लिखा गया था और प्रौद्योगिकी तेजी से चलता है। अधिक हाल के समाधान के लिए, नीचे @ ctrl-alt-dileep के जवाब देखें ।


आपकी ज़रूरतों के अनुसार, आप jQuery टच प्लगइन की कोशिश कर सकते हैं; आप यहाँ एक उदाहरण की कोशिश कर सकते हैं यह मेरे iPhone पर खींचने के लिए ठीक काम करता है, जबकि jQuery UI ड्रैगएबल नहीं करता है।

वैकल्पिक रूप से, आप इस प्लगइन को आज़मा सकते हैं, हालांकि इसके लिए आपको वास्तव में अपना ड्रैगैबल फ़ंक्शन लिखना पड़ सकता है।

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

यदि आप इस के लिए अंतर्निहित समाधान में रुचि रखते हैं, तो यह तीन नई जावास्क्रिप्ट घटनाओं का उपयोग करना है; ऑनटचर्चट, ऑनटचोव और ओटौचेंड ऐप्पल ने वास्तव में उनके उपयोग के बारे में एक लेख लिखा है, जिसे आप यहां पा सकते हैं एक सरल उदाहरण यहां पाया जा सकता है । इन ईवेंट का उपयोग मैं उन दोनों plugins में किया जाता है जो मैंने लिंक किया था।

उम्मीद है की यह मदद करेगा!

यह प्रोजेक्ट सहायक होना चाहिए – नक्शे को ऐसे ईवेंट में क्लिक करने के लिए ईवेंट स्पर्श करें जो कि jQuery UI को iPad और iPhone पर किसी भी परिवर्तन के बिना काम करने की अनुमति देता है। बस किसी भी मौजूदा परियोजना के लिए जेएस जोड़ें।

http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

jQuery UI 1.9 आपके लिए इसका ध्यान रखना है। यह पूर्व का एक डेमो है:

https://dl.dropbox.com/u/3872624/lab/touch/index.html

बस jquery.mouse.ui.js को पकड़ो, यह jQuery की यूआई फ़ाइल के तहत इसे दबाए रखें, और यह सब आपको करना होगा! के रूप में अच्छी तरह से sortable के लिए काम करता है

यह कोड मेरे लिए बहुत अच्छा काम कर रहा है, लेकिन अगर आपकी हो रही त्रुटियां, jquery.mouse.ui.js का एक अद्यतन संस्करण यहां पाया जा सकता है:

एंड्रॉइड या आईओएस के आधार पर जेक्जरी-यूआई छांटने योग्य डिवाइस पर काम नहीं करता है

जिथूब पर यह परियोजना आपका समाधान हो सकता है

https://github.com/furf/jquery-ui-touch-punch

मैं कल इसी तरह की समस्या से जूझ रहा था JQuery के टच पंच के साथ jQuery के यूआई के ड्रैगएबल का उपयोग करके मैंने पहले से "काम कर" समाधान किया था, जो अन्य उत्तरों में उल्लिखित हैं। हालांकि, इस पद्धति का उपयोग मेरे लिए कुछ एंड्रॉइड डिवाइसों में अजीब बग पैदा कर रहा था, और इसलिए मैंने एक छोटा सा jQuery प्लगइन लिखने का निर्णय लिया, जो नकली माउस इवेंट्स को emulates करने वाली विधि का उपयोग करने के बजाय स्पर्श ईवेंट का उपयोग करके HTML तत्वों को खींचने योग्य बना सकता है।

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

आप jquery.pep.js उपयोग करने का प्रयास कर सकते हैं:

jquery.pep.js एक हल्के jQuery प्लगइन है जो ड्रैग करने योग्य ऑब्जेक्ट में किसी भी DOM तत्व को बदलता है। यह ज्यादातर सभी ब्राउज़रों पर काम करता है, पुराने से नया, स्पर्श से क्लिक करने के लिए। मैंने इसे एक ऐसी ज़रूरत की सेवा देने के लिए बनाया था जिसमें jQuery के यूआई के ड्रैगएबल को पूरा नहीं किया गया था, क्योंकि यह स्पर्श डिवाइस पर काम नहीं करता (कुछ हैकिंग के बिना)।

वेबसाइट , गिटहब लिंक