Comment puis-je faire un jQuery UI 'draggable()' div draggable pour l'écran tactile?
j'ai un jQuery UI draggable() qui fonctionne en Firefox et Chrome. Le concept de l'interface utilisateur est essentiellement un clic pour créer un élément de type" post-it".
fondamentalement, je clique ou tape sur div#everything (100% haut et large) qui écoute pour les clics, et une textarea d'entrée affiche. Vous ajoutez du texte, et quand vous avez fini, il le sauvegarde. Vous pouvez faire glisser cet élément autour. Cela fonctionne sur les navigateurs normaux, mais sur un iPad je peux tester avec Je ne peux pas faire glisser les éléments autour. Si je touche pour sélectionner (il s'atténue alors légèrement), Je ne peux pas le faire glisser. Il ne sera pas glisser à gauche ou à droite. J' peut faites glisser vers le haut ou vers le bas, mais je ne suis pas en faisant glisser l'individu div , je suis en faisant glisser l'ensemble de la page web.
donc voici le code que j'utilise pour capturer les 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);
});
et voici le code que j'utilise pour "sauvegarder" la note et transformer le div d'entrée en un div d'affichage:
$('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();
}
});
Et I avoir ce code lorsque je charge la page pour les notes enregistrées:
$('.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();
}
});
mon objet STATE manipule les notes.
Onload, c'est tout le corps 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>
donc, ma question est vraiment: comment puis-je faire ce travail mieux sur iPad?
Je ne suis pas sur jQuery UI, je me demande si c'est quelque chose que je fais de mal avec jQuery UI, ou jQuery, ou s'il peut y avoir mieux les cadres pour faire des éléments multiplateformes / rétro-compatibles () draggable qui fonctionneront pour l'écran tactile UIs.
des commentaires plus généraux sur la façon d'écrire des composantes D'assurance-chômage comme celle-ci seraient également les bienvenus.
Merci!
Maj:
J'ai pu tout simplement enchaîner cela sur mon appel jQuery UI draggable() et obtenir la draggability correcte sur iPad!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
Le jQuery Toucher le plugin a fait le tour!
7 réponses
après avoir perdu de nombreuses heures, je suis tombé sur ceci!
il traduit des événements tap comme des événements click. N'oubliez pas de charger le script après jquery.
j'ai obtenu ce travail sur l'iPad et l'iPhone
$('#movable').draggable({containment: "parent"});
attention: cette réponse a été écrite en 2010 et la technologie se déplace rapidement. Pour une plus récente solution de, voir @ctrl-alt-dileep la réponse ci-dessous .
selon vos besoins, vous pouvez essayer le jQuery touch plugin ; vous pouvez essayer un exemple ici . Il fonctionne très bien à traîner sur mon iPhone, alors que jQuery UI Draggable ne le fait pas.
alternativement, vous pouvez essayer ce plugin, bien que cela pourrait vous obliger à réellement écrire votre propre fonction draggable.
comme un sidenote: croyez-le ou non, nous entendons de plus en plus buzz sur la façon dont les appareils tactiles tels que l'iPad et l'iPhone est à l'origine de problèmes à la fois pour les sites Web utilisant :hover/onmouseover fonctions et le contenu modulable.
si vous êtes intéressé par la solution sous-jacente pour cela, il est d'utiliser trois nouveaux événements JavaScript; ontouchstart, ontouchmove et ontouchend. Apple a en fait écrit un article sur leur utilisation, que vous pouvez trouver ici . Un exemple simplifié peut être trouvé ici . Ces événements sont utilisés dans les deux plugins que j'ai lié.
Espérons que cette aide!
Ce projet devrait être utile - cartes événements tactiles à cliquez sur les événements d'une manière qui permet de jQuery UI pour travailler sur l'iPad et l'iPhone, sans aucun changement. Il suffit d'ajouter le JS à n'importe quel projet existant.
jQuery ui 1.9 va s'occuper de ça pour vous. Voici une démo du pre:
https://dl.dropbox.com/u/3872624/lab/touch/index.html
attrape le jquery.souris.interface.js sort, mets-le sous le fichier jquery ui que tu charges, et c'est tout ce que tu devrais avoir à faire! Fonctionne pour sortable.
ce code fonctionne très bien pour moi, mais si vous avez des erreurs, une version mise à jour de jquery.souris.interface.js peut être trouvé ici:
Jquery-ui sortable ne fonctionne pas sur les appareils tactiles basés sur Android ou IOS
j'ai eu un problème similaire hier. J'ai déjà eu une solution "efficace" en utilisant le draggable de jQuery UI avec le jquery Touch Punch, qui sont mentionnés dans d'autres réponses. Cependant, l'utilisation de cette méthode causait des bugs bizarres dans certains appareils Android pour moi, et donc j'ai décidé d'écrire un petit plugin jQuery qui peut rendre les éléments HTML malléable en utilisant des événements tactiles au lieu d'utiliser une méthode qui émule les événements de la souris faux.
le résultat de il s'agit de jQuery draggable Touch qui est un simple plugin jQuery pour rendre les éléments draggable, qui a des dispositifs tactiles comme sa cible principale en utilisant des événements tactiles (comme touchstart, touchmove, touchend, etc.). Il a toujours un repli qui utilise les évènements de la souris si le navigateur/périphérique ne supporte pas les évènements touch.
vous pouvez essayer d'utiliser jquery.Pep.js :
jquery.Pep.js est un plugin jQuery léger qui tourne n'importe quel DOM élément dans un objet déplaçable. Il fonctionne sur la plupart tous les navigateurs, de l'ancien au nouveau, de toucher pour cliquer. Je l'ai construit pour répondre à un besoin en que le draggable de jQuery UI ne remplissait pas, car il ne fonctionnait pas sur les appareils tactiles (sans quelques hackery).