ฉันมี jQuery UI draggable()ที่ใช้งานได้ใน Firefox และ Chrome โดยพื้นฐานแล้วแนวคิดส่วนติดต่อผู้ใช้คือการคลิกเพื่อสร้างรายการประเภท "โพสต์อิท"
โดยทั่วไปฉันคลิกหรือแตะที่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);
});และนี่คือรหัสที่ฉันใช้ในการ "บันทึก" โน้ตและเปลี่ยนอินพุต div ให้เป็น div ที่แสดง:
$('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 หรืออาจมีกรอบที่ดีกว่าสำหรับการทำองค์ประกอบที่ลากข้ามได้ข้ามแพลตฟอร์ม / ย้อนกลับ () ที่จะ ทำงานกับ UI ของหน้าจอสัมผัส
ความคิดเห็นทั่วไปเพิ่มเติมเกี่ยวกับวิธีการเขียนส่วนประกอบ UI เช่นนี้ก็ยินดีต้อนรับเช่นกัน
ขอบคุณ!
อัปเดต:
ฉันสามารถdraggable()เชื่อมโยงสิ่งนี้เข้ากับการโทรjQuery UI ของฉันและรับการลากที่ถูกต้องบน iPad!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});ปลั๊กอิน jQuery สัมผัสได้เคล็ดลับ!