Comment puis-je faire un jQuery UI " draggable()' div déplaçable pour écran tactile?
J'ai un jQuery UI draggable() qui fonctionne dans Firefox et Chrome. L'interface utilisateur du concept est fondamentalement cliquez sur pour créer un "post-it" type d'élément.
En gros, je cliquez ou appuyez sur div#everything (100% de haut et de large) qui est à l'écoute pour les clics, et un input textarea affiche. Vous ajoutez du texte, et puis quand vous avez terminé, il le sauve. Vous pouvez faire glisser cet élément autour. C'est en travaillant sur les navigateurs normales, mais sur un iPad, je peux le tester avec je ne peux pas faire glisser les éléments autour. Si je touche pour sélectionner (puis il s'estompe un peu), je ne peux pas puis faites-le glisser. Il ne sera pas glisser à gauche ou à droite. Je 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.
Voici donc le code que j'utilise pour la capture de 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 "sauver" la remarque et tourner à l'entrée de la div en display div:
$('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 j'ai 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 STATE objet poignées de sauver 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 de mieux en mieux sur iPad?
Je ne suis pas fixé sur jQuery UI, je me demande si c'est quelque chose que je fais mal avec jQuery UI, jQuery, ou si il peut y avoir de meilleurs cadres pour faire de la croix-plate-forme/compatible draggable() les éléments qui va travailler pour l'écran tactile de l'Isu.
Remarques plus générales sur la façon d'écrire des composants d'INTERFACE comme celle-ci serait la bienvenue.
Merci!
Mise à JOUR:
J'ai été en mesure de simplement la chaîne présente sur mon jQuery UI draggable() appeler et obtenir la bonne draggability sur iPad!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});La jQuery plugin Contact a fait le tour!
- Je suis curieux de savoir quelque chose: vous pouvez faire glisser la div autour avec deux ou trois doigts? Je sais que vous avez parfois utiliser plusieurs doigts pour faire défiler du contenu intégré dans le navigateur Safari mobile, de sorte qu'il peut en être de même pour les "draggable" du contenu.
- Walter Mundt merci! Je n'ai pas essayé toutes les variations de doigts, je vais essayer quand j'arrive dans mes mains!
- deux ou trois doigts effectivement empêché la "page entière" par inadvertance de défilement, mais fait pas de changement pour les déplaçable.
- Cette technique ne semble pas fonctionner pour moi, malheureusement. 🙁
- Vous aurez besoin de chercher d'autres réponses pour d'autres solutions possibles
- Ce plugin fonctionne parfaitement pour moi (déplaçable et redimensionnable): github.com/furf/jquery-ui-touch-punch. Démo ici furf.com/exp/touch-punch. Le code fonctionne aussi bien sur le navigateur Android et iOS (pas testé) en même temps.
Vous devez vous connecter pour publier un commentaire.
Après la perdre de nombreuses heures, je suis tombé sur ce!
jquery-ui-touch-punch
Il traduit appuyez sur les événements que sur les événements.
N'oubliez pas de charger le script après jquery.
J'ai eu ce travail sur l'iPad et l'iPhone
Attention: Cette réponse a été écrit en 2010 et la technologie évolue rapidement. Pour une plus récente solution de, voir @ctrl-alt-dileep la réponse ci-dessous.
En fonction de vos besoins, vous pouvez essayer la jQuery plugin contact; vous pouvez essayer un exemple ici. Il fonctionne très bien pour faire glisser sur mon iPhone, alors que jQuery UI Déplaçable ne le fait pas.
Sinon, vous pouvez essayer cette plugin, même si ça peut vous demander d'écrire votre propre fonction draggable.
Au passage: Croyez-le ou non, nous sommes en audience croissante buzz sur la façon dont les appareils tactiles comme l'iPad et l'iPhone est à l'origine des problèmes à la fois pour les sites web à l'aide de :hover/onmouseover fonctions et déplaçable contenu.
Si vous êtes intéressé par la solution sous-jacente pour cela, c'est d'utiliser trois nouveaux événements JavaScript; ontouchstart, ontouchmove et ontouchend. Apple a effectivement écrit un article à propos de 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é.
.touch({ animate: false, sticky: false, dragx: true, dragy: true, rotate: false, resort: true, scale: false });à mondraggable()appeler et il fonctionne un régal! J'ai encore du travail de tous les événements que je veux vous donner pour obtenir le flux de travail de droit, mais le jQuery touch plugin fait le tour!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.
http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
l'interface utilisateur de jQuery 1.9 va prendre soin de cela pour vous. Voici une démo de l'avant:
https://dl.dropbox.com/u/3872624/lab/touch/index.html
Il suffit de saisir le jquery.mouse.ui.js hors, le coller sous le jQuery ui fichier que vous êtes en train de charger, et c'est tout ce que vous devez faire! Fonctionne pour sortable ainsi.
Ce code fonctionne très bien pour moi, mais si vous obtenez des erreurs, une version mise à jour de jquery.mouse.ui.js peut être trouvé ici:
Jquery-ui sortable ne fonctionne pas sur les appareils tactiles basés sur Android ou IOS
Ce projet sur github peut être votre solution
https://github.com/furf/jquery-ui-touch-punch
J'ai été aux prises avec un problème similaire hier. J'ai déjà eu un "travail" de la solution à l'aide de jQuery UI est déplaçable avec jQuery Touche de Punch, qui sont mentionnées dans d'autres réponses. Cependant, l'utilisation de cette méthode était à l'origine bizarre bugs dans certains appareils Android pour moi, et donc j'ai décidé d'écrire un petit plugin jQuery qui peut apporter des éléments HTML déplaçable en utilisant les événements tactiles au lieu d'utiliser une méthode qui émule de faux événements de la souris.
Le résultat de ceci est jQuery Déplaçable Touch qui est un simple plugin jQuery pour faire des éléments déplaçables, qui a touch car il est la cible principale en utilisant les événements tactiles (comme les évènements touchstart, touchmove, touchend, etc.). Il a toujours une solution de secours qui utilise les événements de la souris si le navigateur/appareil ne prend pas en charge les événements tactiles.
Vous pouvez essayer d'utiliser jquery.pep.js:
Site web, GitHub lien