[英]Jquery : Drop in element dropped
我正在尝试使用jQuery在另一个放置的元素内放置一个元素。 我认为解决方法是使用setTimeout但是我不知道正确的语法。
这是我尝试过的代码：
$(".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 : </label><input type='text' id='nom' /></div><div><label for='courriel'>Courriel :</label><input type='email' id='courriel' /></div><div><label for='message'> Message :</label><textarea id='message'></textarea></div><div class='button'><button type='submit'>Envoyer votre message</button></div></form></div>"); }}); }
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%; }
<body> <div id="modele"> <img src="cadre.jpg" class="drag-cadre" id="draggable"data_type="cadre"><hr> <img src="top.png" class="drag-image" id="draggable"data_type="topbar"><hr> <img src="mid1.png" class="drag-image" id="draggable1"data_type="midbar"><hr> <img src="mid2.png" class="drag-image" id="draggable2"data_type="midbar2"><hr> <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>
看起来您可能正在设置递归函数。
dropInCadre的第一个定义不必是一个函数
if($(ui.draggable).attr("data_type")=="cadre")
//function dropInCadre()
{
setTimeout(dropInCadre, 200)
$(this).append("<div class=cadre></div>");
}
如何使用jQuery在拖放中向拖放元素添加属性？
[英]How to add a attribute to a dropped element in Drag and Drop using jquery?
jQuery拖放：是否可以在元素删除后阻止它拖放到另一个div？
[英]jquery drag and drop: Can I prevent an element to be dropped to another div after it has been dropped?
使用JavaScript将CSS应用于放置区域中的活动放置元素
[英]Apply CSS to active dropped element in a drop area using JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.