bugmenot1
Messages postés8Date d'inscriptionsamedi 23 avril 2005StatutMembreDernière intervention17 mai 2012
-
1 juin 2007 à 04:27
gfpl
Messages postés172Date d'inscriptionsamedi 11 août 2012StatutMembreDernière intervention 9 avril 2011
-
1 mai 2009 à 11:47
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
gfpl
Messages postés172Date d'inscriptionsamedi 11 août 2012StatutMembreDernière intervention 9 avril 2011 1 mai 2009 à 11:47
le script est bien mais bon comment faire que lors d'un refresh de la page on récupéré le précédant drag ? sinon ou est l'utilité ?
cs_inpec
Messages postés3Date d'inscriptionmardi 1 mars 2005StatutMembreDernière intervention15 janvier 2015 2 mars 2009 à 18:14
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>
Click And Drag! (bloc1)
Click And Drag! (bloc2)
</html>
jomree
Messages postés8Date d'inscriptionmercredi 9 mai 2007StatutMembreDernière intervention 5 mars 2009 21 sept. 2007 à 09:04
euh "je cherchais", pas "je cherchait", désolé (dommage qu'on ne puisse pas éditer son post)
jomree
Messages postés8Date d'inscriptionmercredi 9 mai 2007StatutMembreDernière intervention 5 mars 2009 21 sept. 2007 à 09:01
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
slog9
Messages postés34Date d'inscriptiondimanche 16 novembre 2003StatutMembreDernière intervention24 octobre 2009 19 juin 2007 à 00:28
Voilà! mise à jour effectuée!
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...
Merci encore!
slog9
Messages postés34Date d'inscriptiondimanche 16 novembre 2003StatutMembreDernière intervention24 octobre 2009 18 juin 2007 à 21:51
Salut!
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.
the_wwt
Messages postés177Date d'inscriptionjeudi 5 octobre 2006StatutMembreDernière intervention16 janvier 20091 1 juin 2007 à 15:29
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
bugmenot1
Messages postés8Date d'inscriptionsamedi 23 avril 2005StatutMembreDernière intervention17 mai 2012 1 juin 2007 à 04:27
Ca marche sur IE7 et Opera 9.20.
Par contre, si on se deplace trop vite avec la souris, le curseur se deconnecte du bloc et le bloc s'immobilise.
1 mai 2009 à 11:47
2 mars 2009 à 18:14
<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>
21 sept. 2007 à 09:04
21 sept. 2007 à 09:01
Vraiment bravo et un grand merci :D
19 juin 2007 à 00:28
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...
Merci encore!
18 juin 2007 à 21:51
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.
1 juin 2007 à 15:29
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
1 juin 2007 à 04:27
Par contre, si on se deplace trop vite avec la souris, le curseur se deconnecte du bloc et le bloc s'immobilise.