remove - ¿Cómo puedo hacer que una interfaz de usuario jQuery ''arrasgable()'' div se pueda arrastrar para pantalla táctil?
jquery replace html (7)
Después de perder muchas horas, ¡me encontré con esto!
Traduce los eventos de tap como click events. Recuerde cargar el script después de jquery.
Lo tengo trabajando en el iPad y iPhone
$(''#movable'').draggable({containment: "parent"});
Tengo un 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".
Básicamente, hago clic o hago clic en div#everything (100% alto y ancho) que escucha los clics y aparece un 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. Puedo arrastrar hacia arriba o hacia abajo, pero no estoy arrastrando el div individual, estoy arrastrando toda la página web.
Así que aquí está el código que uso 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 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 cargo la página para las 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 objeto STATE maneja el guardado de 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 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 elementos arrastrables () compatibles con plataformas cruzadas / retroactivas que trabajo para UI con pantalla táctil.
También serían bienvenidos comentarios más generales sobre cómo escribir componentes UI como este.
¡Gracias!
ACTUALIZACIÓN: ¡ Pude simplemente encadenar esto en mi llamada jQuery UI draggable() y obtener la capacidad de arrastre correcta en el iPad!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
¡El plugin jQuery Touch hizo el truco!
Estaba luchando con un problema similar ayer. Ya tenía una solución de "trabajo" que utilizaba el arrastrable de jQuery UI junto con jQuery Touch Punch, que se mencionan en otras respuestas. Sin embargo, usar este método causaba errores extraños en algunos dispositivos Android, por lo que decidí escribir un pequeño complemento jQuery que puede hacer que los elementos HTML sean arrastrables mediante el uso de eventos táctiles en lugar de utilizar un método que simule eventos falsos del mouse.
El resultado de esto es jQuery Draggable Touch, que es un plugin jQuery simple para hacer que los elementos sean arrastrables, que tiene dispositivos táctiles como su objetivo principal mediante el uso de eventos táctiles (como touchstart, touchmove, touchend, etc.). Todavía tiene una alternativa que usa eventos de mouse si el navegador / dispositivo no admite eventos táctiles.
Este proyecto debería ser útil: asigna eventos táctiles para hacer clic en los eventos de una manera que permita que jQuery UI funcione en iPad y iPhone sin ningún cambio. Simplemente agregue el JS a cualquier proyecto existente.
Este proyecto en github puede ser tu solución
Puedes intentar usar jquery.pep.js :
jquery.pep.js es un plugin jQuery liviano que convierte cualquier elemento DOM en un objeto arrastrable. Funciona principalmente en todos los navegadores, de antiguo a nuevo, de táctil a clic. Lo construí para servir a una necesidad en la que el arrastre de jQuery UI no cumplía, ya que no funcionaba en dispositivos táctiles (sin algunos hackers).
jQuery ui 1.9 se encargará de esto por ti. Aquí hay una demostración del pre:
https://dl.dropbox.com/u/3872624/lab/touch/index.html
Solo toma el archivo jquery.mouse.ui.js, ponlo debajo del archivo jQuery ui que estás cargando, ¡y eso es todo lo que debes hacer! Funciona para ordenar también.
Este código funciona muy bien para mí, pero si obtiene errores, puede encontrar una versión actualizada de jquery.mouse.ui.js aquí:
Jquery-ui ordenable no funciona en dispositivos táctiles basados en Android o IOS
Precaución: esta respuesta se escribió en 2010 y la tecnología avanza rápidamente. Para una solución más reciente, vea la respuesta de @ ctrl-alt-dileep a continuación .
Dependiendo de sus necesidades, es posible que desee probar el complemento jQuery touch ; puedes probar un ejemplo here . Funciona bien para arrastrar en mi iPhone, mientras que jQuery UI Draggable no funciona.
Alternativamente, puedes probar this plugin, aunque eso puede requerir que realmente escribas tu propia función arrastrable.
Como nota al margen: lo creas o no, estamos escuchando cada vez más rumores acerca de cómo los dispositivos táctiles como el iPad y el iPhone están causando problemas tanto para sitios web que utilizan: funciones de desplazamiento / onmouseover y contenido que se puede arrastrar.
Si está interesado en la solución subyacente para esto, es utilizar tres nuevos eventos de JavaScript; ontouchstart, ontouchmove y ontouchend. Apple en realidad ha escrito un artículo sobre su uso, que puedes encontrar here . Un ejemplo simplificado se puede encontrar here . Estos eventos se usan en los dos complementos a los que me he vinculado.
¡Espero que esto ayude!