Saya memiliki UI jQuery draggable()yang berfungsi di Firefox dan Chrome. Konsep antarmuka pengguna pada dasarnya adalah klik untuk membuat item jenis "post-it".
Pada dasarnya, saya mengklik atau mengetuk div#everything(100% tinggi dan lebar) yang mendengarkan klik, dan area teks input ditampilkan. Anda menambahkan teks, dan setelah selesai teks akan menyimpannya. Anda dapat menyeret elemen ini ke sekitar. Itu berfungsi di browser normal, tetapi di iPad saya dapat menguji dengan saya tidak bisa menyeret item. Jika saya sentuh untuk memilih (lalu sedikit meredup), saya tidak dapat menyeretnya. Itu tidak akan menyeret kiri atau kanan sama sekali. Saya dapat menyeret ke atas atau ke bawah, tetapi saya tidak menyeret individu div, saya menyeret seluruh halaman web.
Jadi, inilah kode yang saya gunakan untuk menangkap klik:
$('#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);
});
Dan inilah kode yang saya gunakan untuk "menyimpan" catatan dan mengubah div input menjadi hanya div tampilan:
$('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();
}
});
Dan saya memiliki kode ini ketika saya memuat halaman untuk catatan yang disimpan:
$('.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();
}
});
STATEObjek saya menangani penyimpanan catatan.
Onload, ini seluruh isi 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>
Jadi, pertanyaan saya sebenarnya adalah: bagaimana saya bisa membuat ini berfungsi lebih baik di iPad?
Saya tidak disetel pada jQuery UI, saya bertanya-tanya apakah ini adalah sesuatu yang saya lakukan salah dengan jQuery UI, atau jQuery, atau apakah mungkin ada kerangka kerja yang lebih baik untuk melakukan elemen draggable () yang kompatibel lintas platform / mundur yang akan berfungsi untuk UI layar sentuh.
Komentar yang lebih umum tentang cara menulis komponen UI seperti ini akan diterima juga.
Terima kasih!
PEMBARUAN:
Saya bisa dengan mudah draggable()menghubungkan ini ke panggilan jQuery UI saya dan mendapatkan draggability yang benar di iPad!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
The jQuery Sentuh Plugin melakukan trik!