मेरे पास एक jQuery UI है draggable()जो फ़ायरफ़ॉक्स और क्रोम में काम करता है। उपयोगकर्ता इंटरफ़ेस अवधारणा मूल रूप से "पोस्ट-इट" प्रकार आइटम बनाने के लिए क्लिक करता है।
मूल रूप से, मैं क्लिक div#everything(100% उच्च और व्यापक) पर क्लिक या टैप करता हूं जो क्लिक के लिए सुनता है, और एक इनपुट टेक्सारिया प्रदर्शित करता है। आप पाठ जोड़ते हैं, और फिर जब आप यह कर लेते हैं तो इसे सहेज लेता है। आप इस तत्व को चारों ओर खींच सकते हैं। यह सामान्य ब्राउज़रों पर काम कर रहा है, लेकिन एक iPad पर मैं इसके साथ परीक्षण कर सकता हूं कि मैं आइटम को चारों ओर नहीं खींच सकता। यदि मैं चयन करने के लिए स्पर्श करता हूं (यह तब थोड़ा कम हो जाता है), तो मैं इसे खींच नहीं सकता। यह बाएं या दाएं बिल्कुल नहीं खींचेगा। मैं ऊपर या नीचे खींच सकता हूं , लेकिन मैं व्यक्ति को नहीं खींच 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वस्तु नोटों को सहेजने का काम करती है।
Onload, यह संपूर्ण html बॉडी है:
<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>तो, मेरा सवाल वास्तव में है: मैं iPad पर इस काम को कैसे बेहतर बना सकता हूं?
मैं jQuery UI पर सेट नहीं हूं, मैं सोच रहा हूं कि क्या यह ऐसा कुछ है जो मैं jQuery UI, या jQuery के साथ गलत कर रहा हूं, या क्या क्रॉस-प्लेटफॉर्म / बैकवर्ड संगत ड्रैगेबल () तत्वों को करने के लिए बेहतर रूपरेखा हो सकती है टचस्क्रीन यूआई के लिए काम करते हैं।
यूआई घटकों को इस तरह से लिखने के बारे में अधिक सामान्य टिप्पणियां स्वागत के साथ-साथ होंगी।
धन्यवाद!
अद्यतन करें:
मैं अपने jQuery यूआई draggable()कॉल पर बस इसे चेन करने में सक्षम था और iPad पर सही ड्रैगगैबिलिटी प्राप्त कर सकता था!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});JQuery टच प्लगइन चाल किया!