dupliquer un element en directRésolu

Question

bonsoir (re) decidemment je vous solicite beaucoup, je suis en plein aprentissage du javascript donc je galere un peu -_-

enfin bon, voila j'aurai voulu savoir si il etait possible de dupliquer un element (genre une image contenu dans une div, donc la div en fait ) en direct sur un site. Ca a l'air bizarre, mais en fait je suis en train de mettre en place une espece d'interface (assez idiote mais bon) de "création" (le mot est grand) graphique a partir d'un ensemble d'element visuel contenu dans des div.

pour l'instant j'en suis la : (on peut deplacer et changer la taille des elements) (l'aspect est un peu special mais c'est en travaux, et le son decalé c'est normal)

http://www.design-splash.com/index.php

donc par exemple, est il possible par un moyen ou un autre avec js de selectionner une patte et de la dupliquer en direct ?

Bul3 · Accepted Answer

bonjour,
tu peux créer les éléments que tu veux, avec createElement et appendChild par exemple
ensuite y mettre ce que tu veux, là aussi
regrade déjà le début sur selfHTML ici
Cordialement          Bul

PetoleTeam · Answer

Bonjour, 
Il existe la méthode cloneNode pour cela 
//-------------------------- 

function Clone_Element( id_){ 
  //-- 
Recup l'objet source 
  var O_Src = document.getElementById( id_); 

  if( O_Src){ 
    //-- Creation d'un clone 

    var O_Clone = O_Src.cloneNode( true); 
    //-- Ajout du clone 
    document.appendChild( 
O_Clone); 
  } 
}
Attention cela crée un clone donc même id 
etc..., donc à initialiser avec au moins une id différente... 
;O)

cs_crasse · Answer

merci pour vos reponses, je m'y met de suite :D !

cs_crasse · Answer

bon apres quelques heures dessus me voila de nouveau perdu -_-"

j'ai a peu pres compris comment fonctionne le clonenode (en appliquant et modifiant des tuto et des example, j'arrive a cloner des node et leur contenu) mais theoriquement (ou dans des fenetre d'alerte ) donc en gros je duplique pas vraiment ma div et son contenu physiquement dans la page.

la ou je bloque c'est sur le appendchild et tout ce qui doit en decouler : 

en gros par exemple j'ai la div suivante (contenant une image):

"patte" name="patte" onMouseOver="fnOnMouseOver('patte');" onMouseOut="fnOnMouseOver();">"img/patte3.png" width="100%" height="100%" >

a laquelle est associé un css :

#patte {
top: 166px;
width: 154px;
height:197px;
position: absolute;
border: 1px dashed #00FF00;
left: 220px;
}

donc en gros l'idéal c'est que je duplique la div (et son contenu), créant ainsi une div identique a la premiere, mais ayant un nouvel  ID et que en plus (ça fait beaucoup -_- ) cela crée dans le fichier css associé, une nouvelle classe pour cette nouvelle div, identique (au moment de la copie) a la classe de la div (node) parent.

cela est il possible (et a porté de main d'un novice -_- ) ?

PetoleTeam · Answer

dans ce cas il est préférable de passer par les class

pour la prise en compte de la class on 
écrit comme suit 

Nota : le name est inutile sur un DIV 

pour la 
déclaration dans la partie style c'est 
.patte { 
  top : 166px; 
  width : 154px; 

  height :197px; 
  position : absolute; 
  border : 1px dashed 
#00FF00; 
  left : 220px; 
}
;O)

cs_crasse · Answer

iop , merci pour ta reponse :D ! j'ai tenté de l'appliquer cependant je suis toujours en galere -_- (mais mon cerveau est en effervescence XD ) ça ne duplique pas mais bon, je dois pas en etre loin : voila ce que j'ai fait : mon element a dupliquer : "divTest26" class= "divTest26" onMouseOver="fnOnMouseOver('divTest26');" onMouseOut="fnOnMouseOver();" onClick="Clone_Element('divTest26');">"img/patte1.png" width="100%" height="100%" > la fonction de duplication dans un js joint (copy.js) : //-------------------------- function Clone_Element(divTest26){ //-- Recup l'objet source var O_Src = document.getElementById(divTest26); if( O_Src){ //-- Creation d'un clone var O_Clone = O_Src.cloneNode ( true) ; //-- Ajout du clone document.appendChild( O_Clone); } } la partie style dans le css joint : .divTest26 { top: 525px; width: 110px; height: 80px; position: absolute; border: 1px dashed #000000; left: 642px; } et les appel du js et du css (qui sont bons a priori mais bon) la seule chose a la quelle je pense qu'il pourrait manquer, ce serai une commande body onLoad="clone_element()"; sinon, je vois pas trop, je nage un peu a vrai dire -_-, sinon j'ai aussi pensé au fait que rien ne precise au script de créer une nouvelle id pour le nouvel element (fruit de la duplication), mais le probleme c'est que je ne sais absolument pas comment ordonner de creer un nouvel id . Puis-je soliciter une nouvelle fois votre aide s'il vous plait (en esperant ne pas trop vous embeter ^^ ) ?

Bul3 · Answer

élagons... ne laissons que le strict nécessaire.... Cordialement Bul

cs_crasse · Answer

trop bien ça marche !! grand merci ^^ !! 



donc en gros ce qu'il manquait c'etait juste le O_Clone.style.top= "100px"; ?

sinon  par contre il reste toujours un petit souci(promis apres j'arrete :3 ) comme on peut le voir maintenant sur ma page (j'ai fait une maj avec ce code corrigé ^^ http://www.design-splash.com/index.php ), en double cliquant sur la patte en bas a gauche du "tas" d'image ( celle qui pointe vers le bas ) ça creer donc une autre patte plus haut, mais cette nouvelle patte n'est pas manipulable, ou plus exactement (et finalement ce qui est assez logique) lorsque je tente de la manipuler, en fait cela modifie la patte "parent", car la nouvelle doit avoir la meme ID que la "parent".

Est-il possible d'ordonner la création d'une patte "child" ayant une nouvelle ID (du coup, appartenant a la meme classe, elle aura les meme proportion de base, mais sera manipulable independamment de la "parent", enfin si je ne me trompe pas, cela dit, parallélement a ça, je me dis aussi que si elle a une nouvelle ID, ce nouvel element devra aussi heriter des comportement 
onMouseOver ="fnOnMouseOver(this);" onMouseOut="fnOnMouseOver();" onClick="Clone_Element(this)

de son element parent, cela se fait il automatiquement lors de la duplication ?

Bul3 · Answer

>>donc en gros ce qu'il manquait c'etait juste le O_Clone.style.top="100px"; ?
non,non. ça c'est pour le voir, sinon ça recouvre l'ancien
mais document.body ( en gras ) là, mon foie....
>>lorsque je tente de la manipuler, en fait cela modifie la patte "parent", car la nouvelle doit avoir la meme ID
comme l'avait signalé petoleteam
alors... change le !    O_Clone.id="ce_que_tu_veux_ou_presque";    
                              tu sauras bien créer/calculer un id spécifique que tu puisses retrouver
          Bul

cs_crasse · Answer

edit :
je viens de comprendre un autre truc qui peut poser probleme a ce niveau la aussi, c'est que la fonction  fnOnMouseOver ne fonctionne que si je precise l'id de la div entre les parenthese apres, avec this cela ne fonctionne pas, donc a mon avis en dupliquant, l'element child doit du coup appliquer la fonction fnOnMouseOver sur son parent. ralala -_- je fais de la brasse coulée +_+ 

y'a t'il un moyen de creer un element child entierement inpendant (nouvel Id et Id reporté dans les parenthese de fnOnMouseOver ) ?
(cela dit je ne sais pas vraiment comment la fonction clone_element fonctionne au niveau du script, est-ce qu'elle peut ajouter une ligne supplémentaire dans le body pour l'element child ?)

Bul3 · Answer

il faut "réinjecter" les fonctions nécessaires.
O_Clone.onmouseover=function() {  ...  } et les autres
          Bul

cs_crasse · Answer

encore une fois merci pour votre patience et vos reponses, 
j'avance a coup sur mais me revoila un peu perdu.
j'avai bien vu la mise en garde de petoleTeam a propos de l'id du child créé, mais je n'ai toujours pas trouvé de moyen de la definir en tant que variable.

je m'explique : dans mon idée, il devrait etre possible de dupliquer plusieurs elements, et ce plusieurs fois, donc si je defini un id sous forme de donnée string ( genre un nom défini) apres la 2e duplication, il y a aura deja deux elements ayant le meme Id (les 2 child crées) c'est pour ça que je bloque dessus car je cherche a definir une maniere de generer les id (par exemple Id du clone =    Id du parent + 1 , sauf que je vois pas comment faire etant donnée que les Id sont des string et nom des valeurs)
c'est pour ça que je tourne un peu en rond.

sinon pour les appel des autres fonctions pour le clones j'ai fait ça :

 function  Clone_Element(dv){   
    var O_Clone  = dv.cloneNode( true);
    document.body.appendChild( O_Clone);
    O_Clone.style.top= "100px";    // pour voir
    O_Clone.id = idString                 <---------  c'est ici que je ne sais pas trop comment procéder 
 }
 
 
 O_Clone.onMouseOver  =  function (){
     fnOnMouseOver()
 }
 
 O_Clone.onMouseOut  = function(){
     fnOnMouseOver()
 }
 
 O_Clone.onDblClick = function(){
     Clone_Element()
 }

la fonction fnOnMouseOver se trouve dans un autre js aussi appelé par le fichier Html (donc j'imagine que ça ne doit pas poser de probleme si les fonctions ne sont pas dans le meme fichier.) malheureusement je ne peux pas tester etant donner que le clone n'est pas manipulable, mais cela vous semble-it correct ?

Bul3 · Answer

faut que tu "calcules" cet ID.
en y ajoutant un compteur, un n° d'ordre, un je ne sais quoi....
     qui permettre de faire qu'il soit unique ET qu'on puisse le retrouver,
     s'y adresser... si c'est nécessaire. 
     là, mon foie, ça dépend de ton application....
          Bul

PetoleTeam · Answer

Bonjour, tout d'abord 1001 excuses pour le body oublié... Juste en passant un petit exemple de l'application de tout ce viens d'être dit avant DIV 001 DIV 004 DIV 003 Il va de soit que cela est à aménager... ----, là, mon foie, ça dépend de ton application....

;O)

cs_crasse · Answer

merciiiiii :D

bon bah je teste ça de suite ! j'espere que je vais y arrivé, parcequ'avec toute l'aide que vous m'avait fourni, je vais commencer a faire le boulet -_-

cs_crasse · Answer

bon bein je pense que je vais devoir lacher l'affaire, j'y arrive pas T_T ça ne veut pas fonctionner. d'un coté j'ai la fonction Drag Drop et Resize qui marche, de l'autre celle de Clone qui marche aussi maintenant, merci ^^ 
mais par contre les deux ensemble ça prend pas °-°. je viens de passer 3 heures a changer tout plein de trucs pour trouver la ou ça cloche, mais rien n'y fait.
Le souci c'est que lorsque je crée un clone, je ne peux plus selectionner le parent pour le deplacer (en gros pour lui faire subir la fonction drag drop et resize, et ça s'applique au clone, sur lequel je ne clic pas physiquement, mais dans le code la fonction drag drop resize le selectionne.)

donc en gros le probleme doit peut etre venir de la maniere dont la fonction dragdrop resize appel les elements.
enfin bon, je suis bien conscient de tirer un peu sur le corde, mais si jamais vous avez un peu de temps pour y jeter un oeil et qu'un truc vous saute aux yeux, puissiez-vous me le dire ^^ ; sinon bah de toute façon je vous remercie pour l'attention et l'aide que vous m'avez accordé. (et je continuerai a essayer d'apprendre le javascript, je ne m'avoue pas vaincu ! )

enfin quoi qu'il en soit voici ma div (toujours cette pauvre div)

un truc que j'ai remarqué deja c'est que je ne peux pas mettre "this" comme attribut a fnOnMouseOver , il n'accepte que le nom de la div (contrairement a la fonction de clonage Fct_Click)

et voici donc la fonction de drag drop and resize (que j'avai trouvé sur code sources il y a quelque temps, et qui marche du tonnerre toute seule):

var X_OTHER    =  1;

var X_LEFT    = 2;

var X_RIGHT = 3;

var Y_OTHER    = 1;

var Y_UP        = 2;

var Y_DOWN    = 3;

var vgCurrentElement = null;

var vgCurrentPositionX = X_OTHER;

var vgCurrentPositionY = Y_OTHER;

    

var vgCurrentX             = 0;

var vgCurrentY             = 0;

var vgCurrentWidth     = 0;

var vgCurrentHeight = 0;

var vgMouseX             = 0;

var vgMouseY             = 0;

var vgMouseDiffX     = 0;

var vgMouseDiffY     = 0;

var vgMouseDown     = false;

var vgTimerMouse;

var vgTimerTime = 20;

//----------------------------//

 function  position(e)

{
    vgMouseX  (navigator.appName.substring(0,3) = "Net") ? e.pageX : event.x+document.body.scrollLeft;
    vgMouseY (navigator.appName.substring(0,3) "Net") ? e.pageY : event.y+document.body.scrollTop;

}

//----------------------------//

 function  fnResizeDiv()

{

    if(vgCurrentElement! =null && vgCurrentElement!= undefined)

    {

        document.getElementById(vgCurrentElement).style.left = vgCurrentX;

        document.getElementById(vgCurrentElement).style.top = vgCurrentY;

        document.getElementById(vgCurrentElement).style.width = vgCurrentWidth;

        document.getElementById(vgCurrentElement).style.height = vgCurrentHeight;

    }

}

//----------------------------//

 function  fnOnMouseDown()

{

    vgMouseDown  = true;

    

    if(vgCurrentElement!= null && vgCurrentElement!=undefined)

    {

        //Init of size

        vgCurrentX                 = document.getElementById(vgCurrentElement).offsetLeft;

        vgCurrentY                 = document.getElementById(vgCurrentElement).offsetTop;

        vgCurrentWidth         = document.getElementById(vgCurrentElement).offsetWidth;

        vgCurrentHeight     = document.getElementById(vgCurrentElement).offsetHeight;

    

        //Init of distance

        vgMouseDiffX = vgMouseX-vgCurrentX;

        vgMouseDiffY = vgMouseY-vgCurrentY;

        

        //Init of position

        if(vgMouseDiffX < 20 || (vgCurrentWidth-vgMouseDiffX) < 20)

        {

            if(vgMouseDiffX < vgCurrentWidth/2)

                vgCurrentPositionX = X_LEFT;

            else

                vgCurrentPositionX = X_RIGHT;

        }

        else

            vgCurrentPositionX = X_OTHER;

            

        

        if(vgMouseDiffY < 20 || (vgCurrentHeight-vgMouseDiffY) < 20)

        {

            if(vgMouseDiffY > vgCurrentHeight/2)

                vgCurrentPositionY = Y_DOWN;

            else

                vgCurrentPositionY = Y_UP;

        }

        else

            vgCurrentPositionY = Y_OTHER;

            

        

        vgTimerMouse = setInterval("fnOnMouseMove();", vgTimerTime);

    }

}

 function  fnOnMouseUp()

{

    vgMouseDown  = false;

    clearInterval(vgTimerMouse);

}

function fnOnMouseMove()

{

    if(vgMouseDown && vgCurrentElement!= null && vgCurrentElement!=undefined)

    {

        switch(vgCurrentPositionX)

        {

            case X_LEFT:    vgCurrentWidth += vgCurrentX-vgMouseX;

                                        if(vgCurrentWidth<0)

                                            vgCurrentWidth = 0;

                                        else

                                            vgCurrentX = vgMouseX;

                                        break;

            case X_RIGHT:    vgCurrentWidth = vgMouseX-vgCurrentX;

                                        if(vgCurrentWidth<0)

                                            vgCurrentWidth = 0;

                                        break;

            default: break;

        }

        switch(vgCurrentPositionY)

        {

            case Y_UP:        vgCurrentHeight += vgCurrentY-vgMouseY;

                                        if(vgCurrentHeight<0)

                                            vgCurrentHeight = 0;

                                        else

                                            vgCurrentY = vgMouseY;

                                        break;

            case Y_DOWN:    vgCurrentHeight = vgMouseY-vgCurrentY;

                                        if(vgCurrentHeight<0)

                                            vgCurrentHeight = 0;

                                        break;

            default: break;

        }

                                    

        if(vgCurrentPositionX==X_OTHER && vgCurrentPositionY==Y_OTHER)

        {

            vgCurrentX = vgMouseX-vgMouseDiffX;

            vgCurrentY = vgMouseY-vgMouseDiffY;

        }

        

        

        

        fnResizeDiv();

    }

}

 function  fnOnMouseOver(sSelectedElementName)

{

    if(!vgMouseDown)

    {

        if(sSelectedElementName == null && sSelectedElementName!="undefined")

        {

            vgCurrentElement = null;

        }

        else

        {

            vgCurrentElement = sSelectedElementName;

        }

    }

}

//----------------------------//

 function  fnOnLoad()

{

    if(navigator.appName.substring(0,3)  == "Net")

        document.captureEvents(Event.MOUSEMOVE);

    document.onmousemove = position;

    

    //fnResizeDiv();

}

et la fonction de clonage est telle que dans le dernier post de petole team (en ce qui concerne le javascript)

Bul3 · Answer

cloneNode reproduit tout à l'identique
y compris les functions associées aux évênements, avec leur paramètres "tel quel".
( si dans l'objet 1 tu met onclick=function(this) : this c'est objet 1
  si tu clones vers objet 2,  ça ne change pas c'est toujours objet 1 )

utilise createElement+appendChild et ajoute ce qu'il faut ( id, fonctions.... )

PetoleTeam · Answer

Bonjour, ----, cloneNode reproduit tout à l'identique

donc le zIndex aussi, voir a le mettre au dessus du clone !!! ----, un truc que j'ai remarqué deja c'est que je ne peux pas mettre \"this\" comme attribut a fnOnMouseOver

Tu peux mais il te faut changer ta fonction pour affecter à l' id du this à vgCurrentElement, par exemple //---------------------------- function fnOnMouseOver( this_){ if(!vgMouseDown){ if( this_){ vgCurrentElement = this_.id; } else{ vgCurrentElement = null; } } } ;O)

cs_crasse · Answer

oh yeahhhhhhhhh \o/ !!!!!!!!!

en mettant this ça marche nickel !! je vais sabrer le champagne ! Bul3 et PetoleTeam , si je pouvais vous forwarder une coupe je le ferai , grand merci a vous deux les gars !!

cs_crasse · Answer

a nan -_- j'ai parlé trop , en fait ça marche nickel mais que sur un seul element, en ce qui concerne les autre ça marche a moitié (en fait il les clone mais je me retrouve avec les meme probleme qu'avant, c'est a dire clone pas manipulable et tout, alors que pourtant j'ai bien réecrit ce qu'il faut partout pour les autres elements, de la meme maniere que pour celui qui se clone bien, mais bon , ça ne veut pas) je vais donc essayer avec createElement (enfin je vais deja essayé de l'utiliser correctement.

Dupliquer un element en direct

22 réponses

Votre réponse

Discussions similaires