FORUM MP | Javascript : deplacer plusieurs div avec la souris

COMMUNAUTE MP

Identifiez vous ...

DOMAINE MP

Bavardages

Langages Généraux

Langages Web

Langages DotNet

Autres langages

Dev. Jeux Video

Sécurité

Sys. Exploitation

Graphismes

Logiciels

Réseaux

Bases de données

Méthodologies

Emplois High-tech

Aide juridique

Articles juridiques

FORUM

CHAT MP IRC

Votre pseudo ...

Srv: irc.moteurprog.com

Chan: #MoteurProg

PARTICIPER

Plus de 3500 emplois.

Visiteur MP

deplacer plusieurs div avec la souris
	Forum : JAVASCRIPT Sous Catégorie : Aucune Type du sujet : Sujet Normal FAQ : FAQ JAVASCRIPT
		SUIVI PAR MAIL INACTIF
		SUJET NON RESOLU
		SUJET ACTIF
		N'APPARTIENT PAS A LA FAQ

PAGE : [1]

FORUM JAVASCRIPT
	Page précedente	Page suivante

reski
Nouveau membre

Inscrit : 25/10/2006
Messages : 3

#113756 Posté le 25/10/06 à 20:51

bonjour a tous,
j'ai chercher partout mais je ne trouve pas comment modifier ce que j'ai pu collecter
je voudrais faire apparaitre des div puis les deplacer dans une page
chacun pouvant etre deplacer separement
voila ce que j'ai trouver

//Init des variables,des Divs-Layers, et du onmousedown function start() { if (ie) { // lance ma_fonction quand on appuie sur le bouton de la souris mon_div.onmousedown= ma_fonction; }else if (ns4) { // lance ma_fonction quand on appuie sur le bouton de la souris document.captureEvents(Event.MOUSEDOWN); document.onmousedown=ma_fonction; }else if (ns6) { // lance ma_fonction quand on appuie sur le bouton de la souris document.getElementById("mon_div").addEventListener("mousedown",ma_fonction, false); } } // Paramétrage du déplacement des Divs-Layers et des onmousemove & onmouseup pendant le onmousedown // le (e) indique au programme qu'il utilise les évenements. // Paramétrage du déplacement des Divs-Layers et des onmousemove & onmouseup pendant le onmousedown // le (e) indique au programme qu'il utilise les évenements. function ma_fonction(e) { if (ie) { //Récupération de la position de la souris window.lastX=event.clientX; window.lastY=event.clientY; // lance doDrag tant que l'on appuie sur le bouton de la souris en la bougeant document.onmousemove=doDrag; // lance endDrag quand on relache le bouton de la souris document.onmouseup=endDrag; }else if (ns4) { //Récupération de la position de la souris window.lastX=e.pageX; window.lastY=e.pageY; // lance doDrag tant que l'on appuie sur le bouton de la souris en la bougeant document.captureEvents(Event.MOUSEMOVE) document.onmousemove=doDrag; // lance endDrag quand on relache le bouton de la souris document.captureEvents(Event.MOUSEUP) document.onmouseup=endDrag; }else if (ns6) { //Récupération de la position de la souris window.lastX=e.clientX; window.lastY=e.clientY; // lance doDrag tant que l'on appuie sur le bouton de la souris en la bougeant window.onmousemove=doDrag; // lance endDrag quand on relache le bouton de la souris window.onmouseup=endDrag; } } // Déplacement des Divs-Layers function doDrag(e) { if (ie) { // Calcul de l'écart de position de la souris var difX=event.clientX-window.lastX; var difY=event.clientY-window.lastY; //Récupération de la position du div et ajout de l'écart de position de la souris var newX1 = parseInt(mon_div.style.left)+difX; var newY1 = parseInt(mon_div.style.top)+difY; // Assignation des nouvelles coordonnées au div mon_div.style.left=newX1+"px"; mon_div.style.top=newY1+"px"; //Assignation de l'anciènne position de la souris window.lastX=event.clientX; window.lastY=event.clientY; }else if (ns4) { // Calcul de l'écart de position de la souris var difX=e.pageX-window.lastX; var difY=e.pageY-window.lastY; //Récupération de la position du div et ajout de l'écart de position de la souris var newX1 = parseInt(document.layers.mon_div.left)+difX; var newY1 = parseInt(document.layers.mon_div.top)+difY; // Assignation des nouvelles coordonnées au div document.layers.mon_div.left=newX1; document.layers.mon_div.top=newY1; //Assignation de l'anciènne position de la souris window.lastX=e.pageX; window.lastY=e.pageY; }else if (ns6) { // Calcul de l'écart de position de la souris var difX=e.clientX-window.lastX; var difY=e.clientY-window.lastY; //Récupération de la position du div et ajout de l'écart de position de la souris var newX1 = parseInt(document.getElementById("mon_div").style.left)+difX; var newY1 = parseInt(document.getElementById("mon_div").style.top)+difY; // Assignation des nouvelles coordonnées au div document.getElementById("mon_div").style.left=newX1+"px"; document.getElementById("mon_div").style.top=newY1+"px"; //Assignation de l'anciènne position de la souris window.lastX=e.clientX; window.lastY=e.clientY; } } function endDrag(e) { if (ie || ns4) { //Réinitialisation du onmousemove document.onmousemove=null; }else if (ns6) { //Réinitialisation du onmousemove window.onmousemove=null; } }

ca fonctionne tres bien pour un seul div mais comment faire pour en deplacer plusieurs
si je comprennais ce que fait ce script ca serrait sans doute facile mais je suis un peu perdu
merci de m'aider

HAUT DE PAGE

Publicité

Inscrit : X
Messages : X

#Aucun

HAUT DE PAGE

Spirit
Superviseur :
- C & C++
Modérateur :
- PHP
- Javascript
- MySQL

Inscrit : 07/04/2004
Messages : 2205

#113777 Posté le 26/10/06 à 01:19

pour plusieurs tu ajoutes une fonction avant ça qui trouve quel div la souris survole, la manière de la déployer dépend de ta façon de faire
__________________________
Spirit - modérateur casu ^-^'

HAUT DE PAGE

reski
Nouveau membre

Inscrit : 25/10/2006
Messages : 3

#113812 Posté le 26/10/06 à 13:10

merci pour cette reponse
je sais pas si je demande trop mais je ne sais pas comment savoir quel div est survolé
donc peu tu me donner un exemple
merci encore

HAUT DE PAGE

reski
Nouveau membre

Inscrit : 25/10/2006
Messages : 3

#113819 Posté le 26/10/06 à 14:10

comme je n'arrive pas a en faire plusieurs je me dis ok je chamge le texte a l'interieur
comme ca

et la plus rien ne fonctionne
peut t'on m'aider ?

HAUT DE PAGE

Spirit
Superviseur :
- C & C++
Modérateur :
- PHP
- Javascript
- MySQL

Inscrit : 07/04/2004
Messages : 2205

#113851 Posté le 26/10/06 à 22:12

pour connaitre lequel tu survoles la solution la plus simple qui me vietn c'est de trouver le div qui correspond à
- position inférieure à la souris
- position + taille supérieure à la souris
__________________________
Spirit - modérateur casu ^-^'

HAUT DE PAGE

barberousse
Nouveau membre

Inscrit : 28/02/2010
Messages : 3

#169083 Posté le 18/03/10 à 10:55

Salut reski.

Moi je te propose d'utiliser plutôt ce script là :

Cliquer-glisser

Il est justement conçu pour manipuler n'importe quelle(s) <div> de la page.
C'est bien documenté. Tu devrais arriver à le mettre en place facilement.

Et pour ce qui est de "apparaitre des div", si tu veux parler d'un effet de fondu, alors je te renvoie à cet autre script :

Apparitions en fondu

HAUT DE PAGE

Czayfaboo
Superviseur :
- Langages Dot.
Modérateur :
- CSharp (C#)
Chef de projet(s) :
- ID3.NET Library
- MoteurProg Work.

Inscrit : 05/01/2005
Messages : 3130

#169097 Posté le 18/03/10 à 17:32

Ou sinon, utiliser tout simplement jQuery, un puissant framework javascript très facile à manipuler, fera tout aussi bien l'affaire et évitera d'avoir des codes javascript venant de tous horizons différents...

Magnifique déterrage de topic btw... ^^
__________________________
Mon Portfolio : http://www.fabienrenaud.com
Vacances Scolaires : http://fr.dates-vacances-scolaires.com

HAUT DE PAGE

barberousse
Nouveau membre

Inscrit : 28/02/2010
Messages : 3

#169105 Posté le 18/03/10 à 21:16

C'est vrai que jQuery est super (même si j'ai personnellement une préférence pour Mootools, hélas moins répandu).

Cela dit, en matière d'octets, contrairement à l'expression consacrée, qui peut le moins peut le plus. Les frameworks prennent tout leur intérêt quant on fait un usage massif du javascript. Pour réaliser deux ou trois effets assez simples, je crois qu'il vaut mieux ne pas sortir l'artillerie lourde.

Ça dépend du projet, quoi...

HAUT DE PAGE


	Page précédente	Page suivante
FORUM JAVASCRIPT

PAGE : [1]

.: Site Web développé par Yann Pingot et l'équipe MPWG avec www.evolvia-web.com :.