আমার একটি 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 ইউআই draggable()কলটিতে এটি চেইন করতে সক্ষম হয়েছি এবং আইপ্যাডে সঠিক ড্রাগগ্যাবিলিটি পেতে পারি!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
JQuery এর টাচ প্লাগইন কৌতুক করেনি!