jquery mobile de glisser et déposer
je joue avec la fonction drag and drop de jQuery UI et cela fonctionne sur mon site web, mais quand je navigue vers ma page web sur un iPad, alors les divs ne font pas drag - la page elle-même se déplace de haut en bas.
j'ai dans la tête de la balise:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/le-frog/jquery-ui.css" type="text/css" media="all" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(init);
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
4 réponses
Excellent exemple de solutions :
jQuery UI Touch Punch est un petit hack qui permet l'utilisation d'événements tactiles sur les sites en utilisant la bibliothèque d'interface utilisateur jQuery UI.
actuellement, interface utilisateur jQuery UI bibliothèque d'interface utilisateur ne supporte pas l'utilisation d'événements tactiles dans leurs widgets et interactions. Cela signifie que l'interface graphique que vous avez conçue et testée dans votre navigateur de bureau échouez sur la plupart, si ce n'est la totalité, des appareils mobiles tactiles, car jQuery UI écoute les événements de la souris-mouseover, mousemove et mouseout-not touch events-touchstart, touchmove et touchend.
C'est là que jQuery UI Touch Punch entre en jeu. Touch Punch fonctionne en utilisant simulated events pour map touch events à leurs analogues d'événements de souris. Il suffit d'inclure le script sur votre page et vos événements tactiles seront converties en leur événements de souris correspondants auxquels jQuery UI répondra comme prévu.
comme je l'ai dit, Touch Punch est un piratage. canard coups de poing certains de jQuery UI de base de la fonctionnalité pour gérer la cartographie des événements tactiles...
Ce problème est connu et a déjà été étudié.
il nécessite un appel correct .preventDefault() dans le gestionnaire d'événement droit.
Tout ce dont vous avez besoin est ici:
jQuery - images modulables sur iPad / iPhone - comment intégrer l'événement.preventDefault ();?
http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript / contient un excellent sniplet de code qui convertit les événements tactiles en événements de souris:
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
// initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
marteau.js fournit une puissante fonctionnalité glisser. https://github.com/EightMedia/hammer.js