Tengo una jQuery UI draggable() que funciona en Firefox y Chrome. El concepto de interfaz de usuario es, básicamente, hacer clic para crear un elemento de tipo "post-it".¿Cómo puedo hacer que una interfaz de usuario jQuery 'arrasgable()' div se pueda arrastrar para pantalla táctil?
Básicamente, hago clic o toco en div#everything (100% de alto y ancho) que escucha los clics y aparece un área de texto de entrada. Agrega texto y luego, cuando termina, lo guarda. Puede arrastrar este elemento alrededor. Eso está funcionando en navegadores normales, pero en un iPad puedo probar con No puedo arrastrar los artículos. Si toco para seleccionar (se atenúa levemente), no puedo arrastrarlo. No arrastrará a la izquierda ni a la derecha en absoluto. I puede arrastrar hacia arriba o hacia abajo, pero no estoy arrastrando el individuo div, estoy arrastrando toda la página web.
Así que aquí está el código que utilizo para capturar clics:
$('#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);
});
Y aquí está el código que utilizo para "salvar" a la nota y gire el div de entrada en sólo un div pantalla:
$('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();
}
});
Y tengo este código cuando me carga la página de notas guardadas:
$('.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();
}
});
Mi mano STATE objeto les ahorrando las notas.
OnLoad, esto es todo el cuerpo 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>
Por lo tanto, mi pregunta es en realidad: ¿cómo puedo hacer este trabajo mejor en el iPad?
No estoy configurado en la interfaz de usuario de jQuery, me pregunto si esto es algo que estoy haciendo mal con jQuery UI, o jQuery, o si puede haber mejores marcos para hacer compatible con plataforma cruzada/retrocompatible () elementos que funcionarán para las IU con pantalla táctil.
También serían bienvenidos comentarios más generales sobre cómo escribir componentes de IU como este.
Gracias!
ACTUALIZACIÓN: pude simplemente encadenar esta en mi jQuery UI draggable() llamada y obtener la correcta draggability en IPAD!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
El jQuery Touch plugin hizo el truco!
Tengo curiosidad acerca de algo: se puede arrastrar el div en torno con dos o tres dedos? Sé que a veces tiene que usar varios dedos para desplazarse por el contenido incrustado en Safari móvil, por lo que puede ser el mismo para el contenido "arrastrable". –
Walter Mundt gracias! No he probado ninguna variación de dedos, lo intentaré cuando lo tenga en mis manos. – artlung
dos o tres dedos en realidad impidieron que la "página completa" se desplazara inadvertidamente, pero no hizo ningún cambio para el arrastrable. – artlung