Deplacer des div avec la souris

Messages postés
1
Date d'inscription
mercredi 6 septembre 2006
Statut
Membre
Dernière intervention
25 octobre 2006
- - Dernière réponse : PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
- 27 oct. 2006 à 10:38
 

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; }elseif(ns4){
// lance ma_fonction quand on appuie sur le bouton de la souris
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=ma_fonction; }elseif(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; }elseif(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; }elseif(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; }elseif(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; }elseif(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; }elseif(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
Afficher la suite 

6 réponses

Messages postés
498
Date d'inscription
mercredi 7 juillet 2004
Statut
Membre
Dernière intervention
13 juillet 2015
6
0
Merci
C'est-à-dire en déplacer plusieurs ?
Tu veux dire quand tu cliques sur un div, tu veux déplacer tout ses div fils ? Si c'est ça, ça doit se faire tout seul non ?

Ca doit être autre chose en fait ? Explique un peu mieux ce que tu veux faire (ps : ca sera pas pour autant que je pourrais t'aider, mais la question m'intéresse :) )

Si tu veux bouger plusieurs Div les uns à côté des autres, il faudrait peut être d'une part, faire une fonction qui liste / récupére les div que tu veux déplacer (ça toi seul sait ce que tu veux dans quels cas), ensuite, "simuler" un onmousedown sur chacun de ces div récupérés (là je sais pas comment faire, ni si c'est possible mais c'est une piste). Alors la fonction ma_fonction va être appelée pour chacun de ces autres div, et la position sera changée.

Espérant que quelqu'un d'un peu plus précis et expérimenté lise ton post, @ pluch :)

PS : qu'est-ce que tu comprends pas dans le code ci dessus ?
Commenter la réponse de el_teedee
Messages postés
731
Date d'inscription
mercredi 15 novembre 2000
Statut
Membre
Dernière intervention
27 mai 2010
0
Merci
pas en js essaie en cgi ou en srf ou encore en tres dificilement en asp ou asp.net mais jai déja créer sa et je ne me souvient plus du language
Commenter la réponse de astuces_jeux
Messages postés
505
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012
0
Merci
y en a plusieurs script qui font le deplacement !!!!
voici des exemples :

tu pe telecharger des cours et exemples supers  :
http://www.editions-eyrolles.com/Livre/9782212119657/developpez-en-ajax

aussi dans :
1 : http://script.aculo.us/

et plusieurs d autres, si tu auras besoin tu me le dis .
bon courage
Commenter la réponse de younes371
Messages postés
731
Date d'inscription
mercredi 15 novembre 2000
Statut
Membre
Dernière intervention
27 mai 2010
0
Merci
je ne vois pas bien se que tu me donnes mais voici des sites qui le font (si tu es inscrit a msn) http://my.msn.comhttp://tonspaces.spaces.live.com 
Commenter la réponse de astuces_jeux
Messages postés
505
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012
0
Merci
Les siteWeb que tu m as donné, utilise les prototype que je t'ai donné avant,
je t'ai donne le code source (comment pêché pas une poisson)
Commenter la réponse de younes371
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10
0
Merci
B
onjour...

Il existe un truc sur ce site qui mérite toute notre attention
DRAG AND DROP ET REDIMENSIONNEMENT
il te restes à prendre ce qui t'intéresse...





;0)
Commenter la réponse de PetoleTeam