jQuery यूआई स्लाइडर मोबाइल उपकरणों पर टच और ड्रैग / ड्रॉप समर्थन

Question

मैंने पहले ही एक परियोजना में jQuery UI स्लाइडर को स्टाइल और कार्यान्वित किया है। हालांकि यह उत्तरदायी है, स्लाइडर को छुआ और खींचे जाने का जवाब नहीं है। इसके बजाय, आपको स्पर्श करना होगा कि आप स्लाइडर को कहां जाना चाहते हैं। मैं jQuery के मोबाइल UI पर स्वैप करने से बचना चाहूंगा, जो छूने और खींचने का समर्थन करता है, क्योंकि हम पहले से ही बड़े पैमाने पर jQuery (गैर-मोबाइल) UI का उपयोग करते हैं।

हम जो कार्यक्षमता चाहते हैं: यहां
हम जो उपयोग कर रहे हैं: यहां

एक डेस्कटॉप पर आप अंतर नहीं बता सकते। एक मोबाइल डिवाइस पर यह स्पष्ट है।

किसी को पता है कि इस समर्थन को jquery UI से कैसे जोड़ा जाए?

$("#videographers").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    return calcTotal(ui.value);
  }
});

Comments

टच डिवाइस पर jQuery के यूआई स्लाइडर्स के

— हमेशा के लिए

Answer 1

jQuery के ui में स्पर्श समर्थन नहीं है। आपको इसे jQuery-ui टच पंच के साथ उपयोग करना चाहिए ।

बस jQuery के ui के बाद स्क्रिप्ट जोड़ें:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

आप cdnjs का उपयोग भी कर सकते हैं:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

नोट: बेहतर इस रेपो को गितुब पर एक स्टार दें।

Comments

यह मेरा दिन बचाता है!

— Dr3am3rz

आपका बहुत बहुत धन्यवाद! यह वास्तव में मेरा दिन बचाता है !!

— सियामसौल अज़रीन

हाँ, यह भी सही मूल्यों का चयन नहीं स्लाइडर के साथ एक बग तय की।

— रोनेन फिस्टिंगर

rails5 Android और ios उपकरणों के साथ एक आकर्षण की तरह काम करता है

— स्टीफ हेज

महान .. यह सुचारू रूप से काम करता है .. :) एक अवलोकन यह है कि आईओएस उपकरणों में जब हम स्लाइडर को स्लाइड करते हैं तो यह तब फिसलता नहीं है जब हम इसे छूते हैं लेकिन जब हम इसे से स्पर्श छोड़ते हैं तो यह उस बिंदु पर स्लाइड करता है। किसी भी विचार क्यों ऐसा होता है? क्या आपके पास इसका कोई हल है?

— राहुल जे राणे

Answer 2

आप बस इस js को लिंक कर सकते हैं।

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

धन्यवाद।

Comments

यह वास्तव में तेजी से वास्तव में अच्छा काम किया है। धन्यवाद

— tijnn