begin process at 2012 05 29 05:06:21
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

deplacer des div avec la souris


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

deplacer des div avec la souris

mercredi 25 octobre 2006 à 20:58:06 | deplacer des div avec la souris

reski_01

 
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
jeudi 26 octobre 2006 à 09:26:20 | Re : deplacer des div avec la souris

el_teedee

Membre Club
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 ?
jeudi 26 octobre 2006 à 16:30:55 | Re : deplacer des div avec la souris

astuces_jeux

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

jeudi 26 octobre 2006 à 20:04:47 | Re : deplacer des div avec la souris

younes371

y en a plusieurs script qui font le deplacement !!!!
voici des exemples :

tu pe telecharger des cours et exemples supers  :
[ Lien ]

aussi dans :
1 : [ Lien ]

et plusieurs d autres, si tu auras besoin tu me le dis .
bon courage
jeudi 26 octobre 2006 à 20:25:46 | Re : deplacer des div avec la souris

astuces_jeux

je ne vois pas bien se que tu me donnes mais voici des sites qui le font (si tu es inscrit a msn) [ Lien ] [ Lien ] 

jeudi 26 octobre 2006 à 20:29:56 | Re : deplacer des div avec la souris

younes371

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)
vendredi 27 octobre 2006 à 10:38:00 | Re : deplacer des div avec la souris

PetoleTeam

Membre Club


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)


Cette discussion est classée dans : position, document, window, souris, div


Répondre à ce message

Sujets en rapport avec ce message

TextArea ou Select et position de la souris [ par 6BerYeti ] Bonjour,Je souhaite faire afficher une infobulle là où est le curseur (avec un offset) et à la déplacer qd la souris se déplace.J'ai à peu près tout c Position de la souris sur une image [ par REMqb ] Voila : comment obtenir la position X et Y de la souris quand elle est sur une image? Redimensionnement de font sur un document.getElementById(obj).innerHTML [ par cousinlol ] Bonsoir,J'ai une fonction impression et je veux redimensionner la taille de la police de ce que j'imprimeJ'ai fait var zi = ""+document.getElementById 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 DIV position absolute fullscreen ? [ par guepard53 ] Salut à tous ! :-)J'aimerais griser le contenu d'une page quand j'affiche un div au dessus. Par exemple une image. J'ai déjà vu ça mais je ne retrouve Placement d'une div sur un textbox [ par ludovicanceaux ] Salut à tous, J'ai un problême de compatibilité entre firefox et internet explorer en fait ma fonction doit faire apparaitre une div avec une sorte d Comment mettre le embed dans un div avec innerHTML [ par Debutant39 ] Bonjour. Voici un script que devrait me permettre de jouer 3 fois un son mais pour qu'il ne soit pas mitraillé, il me faut mettre une boucle de tempor Effet souris [ par jfroger ] Bonjour a tous,Voilà deux jours que je bloque sur une fonction .Je souhaite afficher une image a gauche ou a droite de la souris en fonction de l'empl utilisation tool man drag [ par calitom ] Bonjour,J'utilise la fonction de drag de tool man.J'ai plusieurs div draggables.Voici comment je leur affecte la possibilitée d'être draggé dans une z Cohabitation entre 2 codes impossible (compte à rebours+neige) [ par Aggshkn ] Bonjour,Je souhaite mettre dans une même page deux codes javascipt : un compte à rebours jusqu' au début de l' année 2006 (http://www.editeurjavascrip


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
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 : 0,671 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales