"DRAG" DE BLOC <DIV>
bugmenot1
Messages postés
8
Date d'inscription
samedi 23 avril 2005
Statut
Membre
Dernière intervention
17 mai 2012
-
1 juin 2007 à 04:27
gfpl Messages postés 172 Date d'inscription samedi 11 août 2012 Statut Membre Dernière intervention 9 avril 2011 - 1 mai 2009 à 11:47
gfpl Messages postés 172 Date d'inscription samedi 11 août 2012 Statut Membre Derniè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.
https://codes-sources.commentcamarche.net/source/42904-drag-de-bloc-div
https://codes-sources.commentcamarche.net/source/42904-drag-de-bloc-div
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.