J'ai une interface utilisateur jQuery draggable() qui fonctionne dans Firefox et Chrome. Le concept de l'interface utilisateur consiste essentiellement à cliquer pour créer un élément de type "post-it".
En gros, je clique ou je tapote sur div#everything (100% en hauteur et en largeur) qui écoute les clics, et une zone de saisie s'affiche. Vous ajoutez du texte, et lorsque vous avez terminé, il est enregistré. Vous pouvez faire glisser cet élément. Cela fonctionne sur les navigateurs normaux, mais sur un iPad avec lequel je peux faire des tests, je ne peux pas faire glisser les éléments. Si je touche pour sélectionner (l'image diminue alors légèrement), je ne peux pas la faire glisser. Il ne se déplace pas du tout vers la gauche ou la droite. I peut Je fais glisser vers le haut ou vers le bas, mais je ne fais pas glisser l'individu div je fais glisser toute la page web.
Voici donc 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 "enregistrer" la note et transformer la div d'entrée en une simple 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 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 permet de sauvegarder les notes.
Onload, c'est le corps entier du 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>Ma question est donc la suivante : comment faire pour que cela fonctionne mieux sur l'iPad ?
Je ne suis pas fixé sur jQuery UI, je me demande si c'est quelque chose que je fais mal avec jQuery UI, ou jQuery, ou s'il n'y a pas de meilleurs cadres pour faire des éléments draggables() compatibles avec les écrans tactiles.
Des commentaires plus généraux sur la façon d'écrire des composants d'interface utilisateur comme celui-ci seraient également les bienvenus.
Merci !
UPDATE : J'ai pu simplement enchaîner ceci sur mon interface utilisateur jQuery. draggable() appelez et obtenez la draguabilité correcte sur l'iPad !
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});Le site Plugin jQuery Touch a fait l'affaire !
1 votes
Je suis curieux d'une chose : pouvez-vous faire glisser le div avec deux ou trois doigts ? Je sais qu'il faut parfois utiliser plusieurs doigts pour faire défiler du contenu intégré dans Safari mobile, il se peut donc que ce soit la même chose pour le contenu "glissant".
0 votes
Walter Mundt : merci ! Je n'ai pas essayé de variations de doigts, je vais essayer quand je l'aurai en main !
1 votes
Deux ou trois doigts empêchent en fait la "page entière" de défiler par inadvertance, mais n'apportent aucun changement pour les éléments mobiles.
0 votes
Cette technique n'a pas semblé fonctionner pour moi, malheureusement. :(
0 votes
@blaster Vous devrez consulter les autres réponses pour trouver d'autres solutions possibles.
0 votes
Ce plugin fonctionne parfaitement pour moi (glissant et redimensionnable) : github.com/furf/jquery-ui-touch-punch . Démonstration ici furf.com/exp/touch-punch . Le code fonctionne pour le navigateur ordinaire et Android (iOS non testé) en même temps.