|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 "DRAG" DE BLOC <DIV>
 Information sur la source
 Description
Un petit exemple de drag en javascript, pour déplacer un bloc <div> à l'aide de la souris. J'ai pas trouvé de codes similaires, alors je mets le mien... Jme dis que ça peut peut-être en intéresser certains.
 Source
- <html>
- <head>
- <title>Drag</title>
- <script language="javascript">
-
- var down = 0;
-
- //défini l'état de la souris sur le bloc, mouseDown : 'down = 1' sinon 'down = 0'
- function setD(a,b,e)
- {
- down = a;
- //initialise les variables
-
- //position initiale de la souris lorsqu'on clique sur le bloc
- if(e.pageX) // selon le navigateur (ici pour firefox et peut-être autre...)
- {
- init_x = e.pageX;
- init_y = e.pageY;
- }
- else if(e.clientX) // (ici pour Internet Explorer et peut-être autre...)
- {
- init_x = e.clientX;
- init_y = e.clientY;
- }
- else // (ici pour Internet Explorer et peut-être autre...)
- {
- init_x = e.x;
- init_y = e.y;
- }
-
- div_x = document.getElementById(b).offsetLeft;
- div_y = document.getElementById(b).offsetTop;
- }
-
- //fonction qui exécute le déplacement du bloc
- function drag(b,e)
- {
- //si la souris est 'cliquée' sur le bloc
- if(down==1)
- {
- //on récupère la position de la souris au moment de l'appel de la fontion
- if(e.pageX) // selon le navigateur (ici pour firefox et peut-être autre...)
- {
- pos_x = e.pageX;
- pos_y = e.pageY;
- }
- else if(e.clientX) // (ici pour Internet Explorer et peut-être autre...)
- {
- pos_x = e.clientX;
- pos_y = e.clientY;
- }
- else // (ici pour Internet Explorer et peut-être autre...)
- {
- 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 ( -1 +1 pour qu'il reconnaisse que c'est un calcul...)
- document.getElementById(b).style.left = div_x + dx;
- document.getElementById(b).style.top = div_y + dy;
- //affiche la position dans les champs de texte
- document.getElementById(b + 't').value = document.getElementById(b).offsetLeft;
- document.getElementById(b + 'l').value = document.getElementById(b).offsetTop;
- }
- }
- </script>
-
- </head>
-
- <body bgcolor="#CCCCCC">
- <div id="page" style="width:100%;height:100%;position:relative;">
-
- <form name="form">
- bloc1 (top): <input type="text" name="bloc1t" id="bloc1t" value=''>
- bloc1 (left):<input type="text" name="bloc1l" id="bloc1l" value=''>
- bloc2 (top): <input type="text" name="bloc2t" id="bloc2t" value=''>
- bloc2 (left):<input type="text" name="bloc2l" id="bloc2l" value=''>
- </form>
-
- <!-- propriété left et top à déclarer impérativement, sinon il ne les reconnait pas... -->
- <div id="bloc1" style="position:absolute;top:200px;left:350px;width:80px;height:80px;background-color:#FFFFFF;border:1px Solid #000000;" onMouseDown="setD(1,'bloc1',event);" onMouseMove="drag('bloc1',event);" onMouseUp="setD(0,'bloc1',event);" onMouseOut="setD(0,'bloc1',event);">
-
- Click And Drag! (bloc1)
-
- </div>
-
- <div id="bloc2" style="position:absolute;top:100px;left:650px;width:80px;height:80px;background-color:#FFFFFF;border:1px Solid #000000;" onMouseDown="setD(1,'bloc2',event);" onMouseMove="drag('bloc2',event);" onMouseUp="setD(0,'bloc2',event);" onMouseOut="setD(0,'bloc2',event);">
-
- Click And Drag! (bloc2)
-
- </div>
-
-
- </div>
- </body>
- </html>
<html>
<head>
<title>Drag</title>
<script language="javascript">
var down = 0;
//défini l'état de la souris sur le bloc, mouseDown : 'down = 1' sinon 'down = 0'
function setD(a,b,e)
{
down = a;
//initialise les variables
//position initiale de la souris lorsqu'on clique sur le bloc
if(e.pageX) // selon le navigateur (ici pour firefox et peut-être autre...)
{
init_x = e.pageX;
init_y = e.pageY;
}
else if(e.clientX) // (ici pour Internet Explorer et peut-être autre...)
{
init_x = e.clientX;
init_y = e.clientY;
}
else // (ici pour Internet Explorer et peut-être autre...)
{
init_x = e.x;
init_y = e.y;
}
div_x = document.getElementById(b).offsetLeft;
div_y = document.getElementById(b).offsetTop;
}
//fonction qui exécute le déplacement du bloc
function drag(b,e)
{
//si la souris est 'cliquée' sur le bloc
if(down==1)
{
//on récupère la position de la souris au moment de l'appel de la fontion
if(e.pageX) // selon le navigateur (ici pour firefox et peut-être autre...)
{
pos_x = e.pageX;
pos_y = e.pageY;
}
else if(e.clientX) // (ici pour Internet Explorer et peut-être autre...)
{
pos_x = e.clientX;
pos_y = e.clientY;
}
else // (ici pour Internet Explorer et peut-être autre...)
{
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 ( -1 +1 pour qu'il reconnaisse que c'est un calcul...)
document.getElementById(b).style.left = div_x + dx;
document.getElementById(b).style.top = div_y + dy;
//affiche la position dans les champs de texte
document.getElementById(b + 't').value = document.getElementById(b).offsetLeft;
document.getElementById(b + 'l').value = document.getElementById(b).offsetTop;
}
}
</script>
</head>
<body bgcolor="#CCCCCC">
<div id="page" style="width:100%;height:100%;position:relative;">
<form name="form">
bloc1 (top): <input type="text" name="bloc1t" id="bloc1t" value=''>
bloc1 (left):<input type="text" name="bloc1l" id="bloc1l" value=''>
bloc2 (top): <input type="text" name="bloc2t" id="bloc2t" value=''>
bloc2 (left):<input type="text" name="bloc2l" id="bloc2l" value=''>
</form>
<!-- propriété left et top à déclarer impérativement, sinon il ne les reconnait pas... -->
<div id="bloc1" style="position:absolute;top:200px;left:350px;width:80px;height:80px;background-color:#FFFFFF;border:1px Solid #000000;" onMouseDown="setD(1,'bloc1',event);" onMouseMove="drag('bloc1',event);" onMouseUp="setD(0,'bloc1',event);" onMouseOut="setD(0,'bloc1',event);">
Click And Drag! (bloc1)
</div>
<div id="bloc2" style="position:absolute;top:100px;left:650px;width:80px;height:80px;background-color:#FFFFFF;border:1px Solid #000000;" onMouseDown="setD(1,'bloc2',event);" onMouseMove="drag('bloc2',event);" onMouseUp="setD(0,'bloc2',event);" onMouseOut="setD(0,'bloc2',event);">
Click And Drag! (bloc2)
</div>
</div>
</body>
</html>
 Conclusion
Fonctionne correctement sur IE, ne marche pas sur FireFox à cause des propriétés window.event.clientX pour connaître la position de la souris. Voilà, en espérant que ça servira à d'autre... (marche sous FF après mise à jour)
 Historique
- 19 juin 2007 00:14:06 :
- Ya des choses en moins et d'autres en plus, comme les parseInt() inutiles.
Fonctionne maintenant sous FireFox et Internet Explorer, et surement d'autre... à vous d'essayer!
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
position de la souris sur une image [ par golgoth ]
Bonjour,Comment faire pour recuperer dans un lien la position de la souris sur une image quand je clic sur celle-ci ? Est ce possible ?Merci pour votr
Modifier position de la souris [ par schub1015 ]
Bonjour,j'aimerais savoir s'il est possible de modifier la position de la souris ?Merci pour vos réponses.
Déplacer un DIV avec une image à l'intérieur [ par flexx ]
BonjourJe souhaite déplacer un div avec la souris en cliquant à l'intérieur (glisser-déplacer)Le problème, c'est que quand le
Position souris et frames [ par PlasTicGoat ]
bonjour, J'ai une page web composée de 3 frames: - 1 principale - 1 bandeau en haut - 1 paneau à gauche Je voudrais savoir précis
Position de la souris [ par SDK_akira ]
Bonjour ^^ Je cherche un moyen de recuperer la position de la souris en javascript, c'est possible ? (j'ai cherché mais je n'ai rien trouvé
Position de la souris dans une frame [ par ZeKillerWhale ]
Bonjour à tous, je débute en Javascript et j'aurais besoin de connaître la position du curseur du client dans la page de cadre en ouvra
Déplacer visiblement un bloc [ par cuisine ]
Bonjour,Après 2 jours de recherche je n'ai pas trouvé comment faire quelque chose qui me parait pourtant simple :Un bouton qui déplace un bloc (div) à
[DEPLACE]variable definie par la position de la souris [ par Ankaa1988 ]
Bonjour a tous, je suis en train de me débattre pour trouver le moyen de modifier une variable en fonction de la position de la souris. je m'explique
variable definie par la position de la souris [ par Ankaa1988 ]
Bonjour a tous, je suis en train de me débattre pour trouver le moyen de modifier une variable en fonction de la position de la souris. je m'explique
Connaître la position d'un input [ par kcin ]
Salut à tous.Je vois de partout des codes permettant de connaître la position de la souris, mais existe t-il un code pour connaître la position d'un i
|
 Téléchargements
Logiciels à télécharger sur le même thème :
Comparez les prix Nouvelle version
|