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».
Fondamentalement, je clique ou tape sur div#everything(100% haut et large) qui écoute les clics, et une zone de texte d'entrée s'affiche. Vous ajoutez du texte, puis lorsque vous avez terminé, il l'enregistre. Vous pouvez faire glisser cet élément. Cela fonctionne sur les navigateurs normaux, mais sur un iPad que je peux tester, je ne peux pas faire glisser les éléments. Si je touche pour sélectionner (il s'assombrit alors légèrement), je ne peux pas le faire glisser. Il ne traînera pas du tout à gauche ou à droite. Je peux faire 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 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 j'ai ce code lorsque je charge la page des 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 STATEobjet gère l'enregistrement des 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 améliorer ce travail sur iPad?
Je ne suis pas défini sur l'interface utilisateur jQuery, je me demande si c'est quelque chose que je fais mal avec l'interface utilisateur jQuery ou jQuery, ou s'il existe de meilleurs cadres pour créer des éléments draggable () multi-plateforme / rétrocompatibles qui fonctionne pour les interfaces utilisateur à écran tactile.
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!
MISE À JOUR:
J'ai pu simplement enchaîner ceci sur mon draggable()appel d' interface utilisateur jQuery et obtenir la bonne draggability sur iPad!
.touch({
animate: false,
sticky: false,
dragx: true,
dragy: true,
rotate: false,
resort: true,
scale: false
});
Le plugin jQuery Touch a fait l'affaire!