दिलचस्प पोस्ट
बाइनरी में दशमलव संख्या का प्रतिनिधित्व क्यों नहीं किया जा सकता है? सी # इंटरफेस फ़ील्ड क्यों नहीं रख सकते? कैसे PHP में डेटाबेस पासवर्ड को सुरक्षित करना है? Grep –exclude / – का प्रयोग करें – विशिष्ट फाइलों के जरिये grep के लिए वाक्यविन्यास शामिल नहीं है अजगर अनुरोधों को नकली ब्राउज़र विज़िट करने के लिए कैसे उपयोग करें? FBSDKCoreKit / FBSDKCoreKit.h त्रुटि नहीं मिला PHP: उपयोगकर्ता को मूल पासवर्ड कैसे भेजा जाता है जब वह एमडी 5 का प्रयोग करके एन्क्रिप्ट किया गया पासवर्ड भूल गया होता है? क्या जावा 8 में एक अच्छा विचार कैशिंग है? कर्सर की स्थिति को खोए बिना एक इनपुट का मान अपडेट करना URLEncoder अंतरिक्ष वर्ण का अनुवाद करने में सक्षम नहीं है पीडीएफ़ के साथ गैर-WWW पुनर्निर्देशन के लिए WWW सी ++ 11 में, क्या `i + = ++ i + 1` का प्रदर्शन अनिर्धारित व्यवहार करता है? सी # में वीडियो फ़ाइल की थंबनेल छवि प्राप्त करें क्रिया को निष्पादित करें जब UINavigationController के बैक बार बटन दबाए जाएंगे निर्भरता प्रॉपर्टी सेट वैली () और सेट सेटंट वेल्यू () में क्या अंतर है

टचस्क्रीन के लिए मैं एक 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 टच प्लगइन चाल किया!

Solutions Collecting From Web of "टचस्क्रीन के लिए मैं एक 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 के यूआई के ड्रैगएबल को पूरा नहीं किया गया था, क्योंकि यह स्पर्श डिवाइस पर काम नहीं करता (कुछ हैकिंग के बिना)।

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