Une variante pour corriger la perte du Drag&Drop
<html>
<head>
<title>Drag</title>
<script language="javascript">
var down = 0;
var idDiv = "";
function StartDrag(id,e){
down = true;
idDiv=id
if(e.pageX){
init_x = e.pageX;
init_y = e.pageY;
}else if(e.clientX){
init_x = e.clientX;
init_y = e.clientY;
}else{
init_x = e.x;
init_y = e.y;
}
div_x = document.getElementById(idDiv).offsetLeft;
div_y = document.getElementById(idDiv).offsetTop;
}
function StopDrag(){
down=false;
}
function drag(e){
if(down==1){
if(e.pageX){
pos_x = e.pageX;
pos_y = e.pageY;
}else if(e.clientX){
pos_x = e.clientX;
pos_y = e.clientY;
}else{
pos_x = e.x;
pos_y = e.y;
}
dx = pos_x - init_x; //distance entre la position initiale et la position actuelle en x
dy = pos_y - init_y; //distance entre la position initiale et la position actuelle en y
//déplace le bloc à sa nouvelle position
document.getElementById(idDiv).style.left = div_x + dx;
document.getElementById(idDiv).style.top = div_y + dy;
}
}
</script>
</head>
Très sincèrement, toutes mes félicitations, c'est exactement le script que je cherchait, je l'ai mis en place, adapté à mon code et ça a marché nickel du 1er coup!
Vraiment bravo et un grand merci :D
J'ai enlevé le setTimeOut() et la fonction stopDrag, en fait c'était vraiment pas nécessaire et ça marche même mieux comme ça avec FireFox. J'ai aussi fait passer l'évènement en variable (j'ai pas réussi le faire marcher sans sous firefox...).
En tout cas ça marche, c'est le principal!
Pour le onMouseOut, en fait il est pas non plus nécessaire, ça reste pas "accroché" à la souris comme je le pensais. Si on l'enlève ça n'interrompt pas le drag et donc lorsqu'on revient sur le bloc il se remet à se déplacer. Après c'est comme on veux...
Désolé de pas avoir répondu plus tôt, j'avais une masse de travail assez prenante...
C'est cool si ça peut marcher aussi sur firefox, ça rend la chose beaucoup plus intéressante! je vais regarder ça de plus près et j'modifierai le code si j'arrive à faire marcher tout ça.
Merci pour ces conseils!
bugmenot1 : C'est normal si le bloc se fige quand tu te déplaces trop vite, le calcul de la position est pas assez rapide et du coup le onMouseOut entre en jeu. Mais il est indispensable car si tu te déplace trop vite et que la souris n'est plus sur le bloc, le onMouseUp ne fonctionnera pas et ton bloc restera "accroché" à ta souris ou que tu ailles... C'est sûr qu'il vaut mieux utiliser flash pour faire quelque chose dans ce genre là, c'est plus pratique, mais ça m'était utile pour le site sur lequel je bosse en ce moment et flash n'est pas vraiment adéquate pour ce projet, donc voilà...
j'regarde tout ça et j'mets la correction en ligne.
Bonjour,
Je trouve ton code pas très propre, sic, normal qu'il ne marche pas sous FF.
1: Tu devrais rajouter + "px" pour les propriétés style.top/left.
2: Il me semble inutile de rappeler ta fonction drag avec setTimeout plus qu'elle est censé être appelé dès que la souris bouge.
3: Pour récupérer la position de la souris même sous FF fais:
init_x = window.event ? window.event.clientX : windows.pageX;
init_y = window.event ? window.event.clientY : windows.pageY;
Idem pour les dx/y.
Pour connaitre la position d'un élément sans passer par parseInt(document.getElementById(b).style.left). Il existe document.getElementById(b).offsetLeft qui est un entier.
4: Mettre des parseInt quand c'est déjà des entiers est inutile
Cordialement,
Pierrick
<html>
<head>
<title>Drag</title>
<script language="javascript">
var down = 0;
var idDiv = "";
function StartDrag(id,e){
down = true;
idDiv=id
if(e.pageX){
init_x = e.pageX;
init_y = e.pageY;
}else if(e.clientX){
init_x = e.clientX;
init_y = e.clientY;
}else{
init_x = e.x;
init_y = e.y;
}
div_x = document.getElementById(idDiv).offsetLeft;
div_y = document.getElementById(idDiv).offsetTop;
}
function StopDrag(){
down=false;
}
function drag(e){
if(down==1){
if(e.pageX){
pos_x = e.pageX;
pos_y = e.pageY;
}else if(e.clientX){
pos_x = e.clientX;
pos_y = e.clientY;
}else{
pos_x = e.x;
pos_y = e.y;
}
dx = pos_x - init_x; //distance entre la position initiale et la position actuelle en x
dy = pos_y - init_y; //distance entre la position initiale et la position actuelle en y
//déplace le bloc à sa nouvelle position
document.getElementById(idDiv).style.left = div_x + dx;
document.getElementById(idDiv).style.top = div_y + dy;
}
}
</script>
</head>
Click And Drag! (bloc1)
Click And Drag! (bloc2)
</html>
Vraiment bravo et un grand merci :D