11521 sujets

JavaScript, DOM et API Web HTML5

Création de div en trop avec jQuery

Bonjours à tous , alors j'ai un site web sur le drag and drop , chaque élément que je déplace ont un code html spécifique , or a chaque fois que je place deux fois le même élément il se duplique dans mon code , par exemple en plaçant un élément je fais apparaître un cadre , et bien si j'en replace un il se place aussi et je me retrouve avec deux div . Une âme charitable s'il vous plait.

Ceci est le code complet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Demo</title>


<style>
div#modele {
            width:20%;
            height:600px;overflow:auto;
            border:3px solid black;
           }
       
.page {
        position:absolute;
        margin-left:20%;
        margin-top: -55%;
	width:80%;
	height:700px;
	
        }
       
.cadre {
        position:absolute;
        margin-left:20%;
        margin-top: 10%;
	width:70%;
	height:500px;
	background-color:cyan;
        border:3px solid black;
        z-index: -5;
       }
       
.footer {
         position:absolute;
         bottom:0;
         background-color:#00FF00;
         width:100%;
         text-align:center;
        }
       
.header {
         position:absolute;
         background-color:#00FF00;
         width:100%;
         text-align:center;
        }
       
.middle {
         position:absolute;
         top:95px;
         background-color:#00FF00;
         width:45%;
        }

.middle2 {
          position:absolute;
          top:95px;
          right:0px;
          width:45%;
         }

</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>


</head>

<body>

    <div id="modele">
        
<script>

</script>

    </div>

<input type="button" value="Recommencer" Onclick="javascript:window.history.go(0)">

    <div 
        class="page">
    </div>
    	
<script>

function widget(iname, iimg, itype, ihtml) {
    this.nom=iname;
    this.image=iimg;
    this.type=itype;
    this.html=ihtml;
}
 
 
var arraywidget=new Array();
arraywidget.push(new widget("form", "./0.jpg", "form", "<div class=cadre></div>"));
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>"));
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>"));
arraywidget.push(new widget("img", "./3.jpg", "image", "<div class=middle2><img src='octog.jpg'</div>"));
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>"));

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){
            if($(ui.draggable).attr("data_type")=="form") {
                for(i=0; i < arraywidget.length; i++) {
                    if(arraywidget[i].type=="form"&arraywidget[i].nom=="form")
                        $(this).append(arraywidget[i].html);
                        setTimeout(dropInCadre, 200) 
                    }
                
           }
        }
    });
}
    
$(".drag").draggable({revert:true,helper:"clone"}) ;

    function dropInCadre() {
        $(".cadre").droppable({
           drop:function(event, ui){
                for(i=1; i < arraywidget.length; i++) {
                    if(arraywidget[i].type==$(ui.draggable).attr("data_type"))
                        $(this).append(arraywidget[i].html);
                }
           }});
        } 
        
       
        
</script>

</body>


je pense que mon soucis viens de là:

   $(".page").droppable({
        drop:function(event, ui){
            if($(ui.draggable).attr("data_type")=="form") {
                for(i=0; i < arraywidget.length; i++) {
                    if(arraywidget[i].type=="form"&arraywidget[i].nom=="form")
                        $(this).append(arraywidget[i].html);


Ce que je veux : 
<div class="page ui-droppable">
    <div class="cadre"></div></div>


Ce que j'ai ... :
<div class="page ui-droppable">
    <div class="cadre ui-droppable"></div><div class="cadre ui-droppable"></div></div>

En gros je veux écraser l'ancien cadre si vous préférez , soit ça soit vérifier a chaque fois qu'il ne doit pas placez un élément déjà placer .

Désoler de la longue lecture mais vous êtes mon dernier recours . Merci de vos futures réponses[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par jattaquelejquery (12 Jun 2015 - 16:13)
Sujet clos
Aller à