Jquery copie indésirable

Bonsoir ,
Alors mon but est de faire un site web dynamique avec Jquery le concept est simple . J'ai des éléments
à drager , le premier étant un cadre ou je pourrais placer d'autre éléments a l'intérieur
http://img15.hostingpics.net/pics/934273891.png
http://img15.hostingpics.net/pics/585137332.png]
http://img15.hostingpics.net/pics/258852753.png]

le problème étant que si je remet plusieur fois le même éléments il se superpose et se recrée dans le code :
http://hpics.li/7f0b3e7

Je voudrais empécher ces copie de div et pouvoir les remplacer a chaque fois que je remet le même éléments .

voici mon code javascript :

function widget(iname, iimg, itype, ihtml,iclasse) {
                this.nom=iname;
                this.image=iimg;
                this.type=itype;
                this.html=ihtml;
                this.classe=iclasse;
                }
 
 
                var arraywidget=new Array();
                arraywidget.push(new widget("form", "./0.jpg", "form", "<div class=cadre></div>","cadre"));
                arraywidget.push(new widget("barre haute", "./1.jpg", "topbar","<div class=header><form action='x' method='post'>Identification :<input type='text' name='login' />Mot de passe :<input type='password' name='pass' /></form></div>","header"));
                arraywidget.push(new widget("list", "./2.jpg", "liste", "<div class=middle><ul> <li> Article 1 </li> <li> Article 2 </li> <li> Article 3 </li><li> Article 4 </li><li> Article 5 </li> <li> Article 6 </li><li> Article 7 </li><li> Article 8 </li><li> Article 9 </li><li> Article 10 </li></ul></div>","middle"));
                arraywidget.push(new widget("img", "./3.jpg", "image", "<div class=middle2><img src='octog.jpg'</div>","middle2"));
                arraywidget.push(new widget("barre basse", "./4.jpg", "bottombar", "<div class=footer><form action='x' method='post'><div><label for='nom'>Nom :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type='text' id='nom' /></div><div><label for='courriel'>Courriel :</label><input type='email' id='courriel' /></div><div><label for='message'>&nbsp;&nbsp;&nbsp;Message :</label><textarea id='message'></textarea></div><div class='button'><button type='submit'>Envoyer votre message</button></div></form></div>","footer"));

                for(i=0; i < arraywidget.length; i++) 
                    {
                $("#modele").append("&nbsp;<img class='drag' src='"+arraywidget[i].image+"' data_type='"+arraywidget[i].type+"' width='225' height='133' /><hr /> ");
                }

 
	
                setTimeout(initdrag, 200) ;
                function initdrag() {
                $(".drag").draggable({revert:true,helper:"clone"}) ;
                $(".page").droppable({
                
                    drop:function(event, ui){
                        event.preventDefault();
                        event.stopPropagation();
                        if(($(ui.draggable).attr("data_type")=="form")&&confirm("Voulez-vous placer un NOUVEAU cadre ?")) {
                        $(this).empty();
                        }
                        else {
                        return false;
                      
                        }
                            for(i=0; i < arraywidget.length; i++) {
                            if(arraywidget[i].type=="form"&&arraywidget[i].nom=="form")
                            $(this).append(arraywidget[i].html);
                            setTimeout(dropInCadre, 200) 
                           
                                    }
                                }
                            });
                        }
           
                        
                       
                        function dropInCadre() {
                                $(".cadre").droppable({
                                    drop:function(event, ui){
                                        if(($(ui.draggable).attr("data_type")!="form"))
                                        for(i=0; i < arraywidget.length; i++) {
                                            if(arraywidget[i].type==$(ui.draggable).attr("data_type"))
                                                $(this).append(arraywidget[i].html);
                                        
                                 
                                            if($(this).find(arraywidget[i].classe=="header").lenght) {
                                                alert('div en trop');
                                            }
                                        }
                                    }
                            });
                        } 
        
       

merci de vos futures réponses [/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par axadebug (25 Jun 2015 - 21:27)