begin process at 2012 02 09 17:04:26
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > "DRAG" DE BLOC <DIV>

"DRAG" DE BLOC <DIV>


 Information sur la source

Note :
8 / 10 - par 2 personnes
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :drag, ondrag, position, souris, déplacer Niveau :Débutant Date de création :30/05/2007 Date de mise à jour :19/06/2007 00:14:06 Vu :15 520
Auteur : slog9

Ecrire un message privé
Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

 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

Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

 Sources en rapport avec celle ci

COULEUR DE FOND SELON POSITION SOURIS par mailliam
DRAG & DROP SIMPLE, SIMPLE, SIMPLE par jdmcreator
Source avec Zip Source avec une capture DKSDRAGDROP : UNE BIBLIOTHÈQUE DE DRAG AND DROP ET DE GESTIO... par DARKSIDIOUS
LIBRAIRIE DE DRAG AND DROP par mickaelpfr
Source avec Zip PROTOTYPE DE DRAG'N DROP par FasteX_

Commentaires et avis

Commentaire de bugmenot1 le 01/06/2007 04:27:15

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.

Commentaire de the_wwt le 01/06/2007 15:29:25

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

Commentaire de slog9 le 18/06/2007 21:51:14

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.

Commentaire de slog9 le 19/06/2007 00:28:36

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!

Commentaire de jomree le 21/09/2007 09:01:43

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

Commentaire de jomree le 21/09/2007 09:04:04

euh "je cherchais", pas "je cherchait", désolé (dommage qu'on ne puisse pas éditer son post)

Commentaire de inpec le 02/03/2009 18:14:11

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>
<body bgcolor="#CCCCCC" onMouseMove="drag(event);" onMouseUp="StopDrag();">
<div  id="bloc1" onMouseDown="StartDrag('bloc1',event);" style="position:absolute;top:200px;left:350px;width:80px;height:80px;background-color:#FFFFFF;border:1px Solid #000000;">
Click And Drag! (bloc1)
</div>

<div id="bloc2" onMouseDown="StartDrag('bloc2',event);"  style="position:absolute;top:100px;left:650px;width:80px;height:80px;background-color:#FFFFFF;border:1px Solid #000000;">
Click And Drag! (bloc2)
</div>
</body>
</html>

Commentaire de gfpl le 01/05/2009 11:47:10 6/10

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é ?

 Ajouter un commentaire


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&#233;placer un div avec la souris en cliquant &#224; l'int&#233;rieur (glisser-d&#233;placer)Le probl&#232;me, c'est que quand le Position souris et frames [ par PlasTicGoat ] bonjour, J'ai une page web compos&#233;e de 3 frames: - 1 principale - 1 bandeau en haut - 1 paneau &#224; gauche Je voudrais savoir pr&#233;cis&#23 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&#233; mais je n'ai rien trouv&#233; Position de la souris dans une frame [ par ZeKillerWhale ] Bonjour &#224; tous, je d&#233;bute en Javascript et j'aurais besoin de conna&#238;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


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 5,429 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)