Question

使用jQuery，我试图将一个元素放入另一个被删除的元素中。我认为解决这个问题的方法是使用setTimeout，但我不知道正确的语法。

这是我尝试过的代码：

＆＃13;

$(".drag-cadre").draggable({revert:true,helper:"clone"}) ;
$(".page").droppable({
drop:function(event, ui){
alert("drag type:"+$(ui.draggable).attr("data_type"));
if($(ui.draggable).attr("data_type")=="cadre")
    function dropInCadre() 
    {
     setTimeout(dropInCadre, 200)  
       $(this).append("<div class=cadre></div>");
    }
 }});
    
$(".drag-image").draggable({revert:true,helper:"clone"}) ;

function dropInCadre() {
    $(".cadre").droppable({
        drop:function(event, ui){
        alert("drag type:"+$(ui.draggable).attr("data_type"));
        if($(ui.draggable).attr("data_type")=="topbar")
            $(this).append("<div class=header><form action='x' method='post'>Identification :<input type='text' name='login' />Mot de passe :<input type='password' name='pass' /></form></div>");
            
        if($(ui.draggable).attr("data_type")=="midbar2")
            $(this).append("<div class=middle2><img src='octog.jpg'</div>");

        if($(ui.draggable).attr("data_type")=="midbar")
            $(this).append("<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>");

        if($(ui.draggable).attr("data_type")=="botbar")
            $(this).append("<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>");
     }});
 }

＆＃13;

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;
       }           
.footer {
        position:absolute;
        bottom:0;
        background-color:#00FF00;
        width:100%;
        text-align:center;
        border:3px solid black;
       }           
.header {            
        background-color:#00FF00;
        width:100%;
        text-align:center;
        border:3px solid black;
       }           
.middle {
        position:absolute;
        top:47px;
      border:3px solid black;
        background-color:#00FF00;
        width:45%;            
       }
.middle2 {
        position:absolute;
        top:47px;
        right:0px;
       border:3px solid black;
        width:45%;            
       }

＆＃13;

<body>
    <div id="modele">
       &nbsp;<img src="cadre.jpg" class="drag-cadre" id="draggable"data_type="cadre"><hr>
        &nbsp;<img src="top.png" class="drag-image" id="draggable"data_type="topbar"><hr>
       &nbsp;<img src="mid1.png" class="drag-image" id="draggable1"data_type="midbar"><hr>
       &nbsp;<img src="mid2.png" class="drag-image" id="draggable2"data_type="midbar2"><hr>
       &nbsp;<img src="bot.png" class="drag-image" id="draggable3"data_type="botbar"><hr>
    </div>
<input type="button" value="Recommencer" Onclick="javascript:window.history.go(0)">
    <div class="page">
    </div>

＆＃13;

Answer 1

看起来你可能正在设置一个递归函数....

dropInCadre的第一个定义不需要是函数

if($(ui.draggable).attr("data_type")=="cadre")
    //function dropInCadre() 

    {
     setTimeout(dropInCadre, 200)  
       $(this).append("<div class=cadre></div>");

    }

Jquery：掉落元素

1 个答案: