Tengo una interfaz de usuario de jQuery draggable()que funciona en Firefox y Chrome. El concepto de interfaz de usuario consiste básicamente en hacer clic para crear un elemento de tipo "post-it".
Básicamente, hago clic o toco div#everything(100% alto y ancho) que escucha los clics y se muestra un área de texto de entrada. Agrega texto y luego, cuando termina, lo guarda. Puede arrastrar este elemento alrededor. Eso funciona en navegadores normales, pero en un iPad con el que puedo probar no puedo arrastrar los elementos. Si toco para seleccionar (luego se atenúa ligeramente), no puedo arrastrarlo. No se arrastrará a la izquierda ni a la derecha en absoluto. Yo puedo 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 uso para "guardar" la nota y convertir el div de entrada en solo un div de visualización:
$('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 cargo 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 STATEobjeto se encarga de guardar las notas.
Onload, este 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>Entonces, mi pregunta es realmente: ¿cómo puedo hacer que esto funcione mejor en iPad?
No estoy configurado en jQuery UI, me pregunto si esto es algo que estoy haciendo mal con jQuery UI o jQuery, o si puede haber mejores marcos para hacer elementos draggable () compatibles con versiones anteriores o multiplataforma que lo harán funcionan para interfaces de usuario de pantalla táctil.
También serían bienvenidos comentarios más generales sobre cómo escribir componentes de interfaz de usuario como este.
¡Gracias!
ACTUALIZACIÓN: ¡
Pude simplemente encadenar esto en mi draggable()llamada jQuery UI y obtener la capacidad de arrastre correcta en iPad!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});¡El complemento jQuery Touch funcionó!