CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 12:26:26

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

"DRAG" DE BLOC <DIV>

Information sur la source

Note :

8,00 / 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 :12 348

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

VERIFIER UNE ADRESSE E-MAIL par elmersaid

DÉTECTER LES VISITEURS EN PROVENANCE DE GOOGLE par elmersaid

EMPÊCHER QUE VOTRE PAGE NE S'AFFICHE PAS DANS UN CADRE (IFRA... par elmersaid

ROLLOVER SUR LES BARRES DE SCROLL par elmersaid

OUTIL DE SÉLECTION par jdmcreator

Toutes les sources de la catégorie Trucs & Astuces

Sources en rapport avec celle ci

DRAG & DROP SIMPLE, SIMPLE, SIMPLE par jdmcreator

DKSDRAGDROP : UNE BIBLIOTHÈQUE DE DRAG AND DROP ET DE GESTIO... par DARKSIDIOUS

LIBRAIRIE DE DRAG AND DROP par mickaelpfr

PROTOTYPE DE DRAG'N DROP par FasteX_

TAILLES ET POSITIONS DES OBJETS par bultez

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é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&#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é 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

Nos sponsors

Derniers Blogs

TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

Forum

COUPER UNE PARTIE DE CHAINE par bydouille

JE VEUX LE CODE D'ANNIMATION AVEC JAVASCRIPT par dalinda

J'AI TROUVéE UN CODE SOURCE SUR INTERNET ET J'AI PAS LE COMPRIS par dalinda

RE : RéCUPERER LA TAILLE D'UN DIV par bumbo

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche formation complete en GIMP
Budget : 750€
Module sur Prestashop
Budget : 700€
Redaction d-une page de vente pour un ebook
Budget : 300€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5