Ho un'interfaccia utente jQuery draggable()
che funziona in Firefox e Chrome. Il concetto di interfaccia utente è fondamentalmente fare clic per creare un elemento di tipo "post-it".
Fondamentalmente, faccio clic o tocco div#everything
(100% in alto e in largo) che ascolta i clic e viene visualizzata un'area di testo di input. Aggiungi del testo e poi quando hai finito lo salva. Puoi trascinare questo elemento in giro. Funziona su browser normali, ma su un iPad con cui posso testare non posso trascinare gli elementi in giro. Se tocco per selezionare (si attenua leggermente), non posso quindi trascinarlo. Non trascinerà affatto a sinistra oa destra. Io posso trascinare verso l'alto o verso il basso, ma non sto trascinando l'individuo div
, sto trascinando l'intera pagina web.
Quindi ecco il codice che utilizzo per acquisire i clic:
$('#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);
});
Ed ecco il codice che uso per "salvare" la nota e trasformare il div di input in un div di visualizzazione:
$('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();
}
});
E ho questo codice quando carico la pagina per le note salvate:
$('.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();
}
});
Il mio STATE
oggetto gestisce il salvataggio delle note.
Onload, questo è l'intero corpo 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>
Quindi, la mia domanda è davvero: come posso farlo funzionare meglio su iPad?
Non sono impostato su jQuery UI, mi chiedo se questo sia qualcosa che sto facendo di sbagliato con jQuery UI, o jQuery, o se potrebbero esserci framework migliori per creare elementi trascinabili () compatibili multipiattaforma / all'indietro che lo faranno lavorare per le interfacce utente touchscreen.
Sarebbero graditi anche commenti più generali su come scrivere componenti dell'interfaccia utente come questo.
Grazie!
AGGIORNAMENTO:
sono stato in grado di collegarlo semplicemente alla mia draggable()
chiamata dell'interfaccia utente jQuery e ottenere la trascinabilità corretta su iPad!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
Il plugin jQuery Touch ha fatto il trucco!