draggable()Firefox ve Chrome'da çalışan bir jQuery kullanıcı arayüzüne sahibim . Kullanıcı arabirimi kavramı temelde "post-it" tipi bir öğe oluşturmak için tıklamaktır.
Temel olarak, div#everythingtıklamaları dinleyen (% 100 yüksek ve geniş) üzerine tıklıyorum veya dokunuyorum ve bir giriş metin alanı görüntüleniyor. Metin eklersiniz ve işiniz bittiğinde onu kaydeder. Bu öğeyi sürükleyebilirsiniz. Bu normal tarayıcılarda çalışıyor, ancak bir iPad'de test edebilirim, öğeleri sürükleyemiyorum. Seçmek için dokunursam (sonra hafifçe kararır), sonra sürükleyemem. Sola veya sağa hiç sürüklenmez. Ben yapabilirsiniz yukarı veya aşağı sürükle, ama bireysel sürükleyerek değilim divben bütün web sayfasını sürükleyerek ediyorum.
İşte tıklamaları yakalamak için kullandığım kod:
$('#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);
});Ve notu "kaydetmek" ve giriş divini yalnızca bir display div'e dönüştürmek için kullandığım kod:
$('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();
}
});Kaydedilen notlar için sayfayı yüklediğimde bu koda sahip oluyorum:
$('.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();
}
});Benim STATEnotları kaydetme nesne kolları.
Onload, bu tüm html gövdesidir:
<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>Öyleyse, sorum şu: Bunun iPad'de daha iyi çalışmasını nasıl sağlayabilirim?
JQuery kullanıcı arayüzüne ayarlı değilim, bunun jQuery UI veya jQuery ile yanlış yaptığım bir şey olup olmadığını veya çapraz platform / geriye dönük uyumlu sürüklenebilir () öğeleri yapmak için daha iyi çerçeveler olup olmadığını merak ediyorum. dokunmatik ekran kullanıcı arayüzleri için çalışır.
Bunun gibi UI bileşenlerinin nasıl yazılacağı hakkında daha genel yorumlar da memnuniyetle karşılanacaktır.
Teşekkürler!
GÜNCELLEME:
Bunu jQuery UI draggable()çağrıma bağlayabildim ve iPad'de doğru sürüklenebilirliği elde ettim!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});JQuery Dokunmatik eklentisi işe yaradı!