[英]Jquery Drag and Drop on Ajax loaded Div
我希望能够将页面上的元素拖动到ajax加载的div内的droppable元素中。 当我将droppable元素放置在常规页面中时,而在ajax加载的div中具有相同元素时,我可以使代码工作。 我非常确定这是因为我调用脚本的方式以及它们在dom上的加载方式,但是我找不到解决方案。 注意:我已经尝试在调用jquery ui之前调用加载ajax内容的代码,但这也不起作用。 这就是我的所有调用方式,为简洁起见,我删除了多余的代码。
主页
<head>
<scripts -- jquery, jquery ui>
<script>
$(document).ready(function(){
$( "#site-preview" ).load( "/site/preview" );
});
</script>
</head>
<body>
<div class="draggable><img src=//etc/> </div>
//if I put this div here, I can drop to it, so i know the drop code works.
// <div class="droppable col-md-2" style="height:100px;border:1px solid gray"><p> </p></div>
<div id="site-preview"></div>
<script>
$(function() {
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
</body>
Ajax加载的代码
<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
<p> </p>
</div>
之所以追加,是因为您当时试图在不存在的元素上调用droppable
。 为了解决这个问题,您可以使用可以附加到load
函数的回调函数,然后再运行其余函数。
$(document).ready(function(){
$("#site-preview").load("/site/preview", function() {
// Page loaded and injected
// We launch the rest of the code
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
});
您可以在此处找到有关load
功能的其他信息。 回调可以接受参数,并且可以用于例如检查其是否为404。
好吧,我可以通过将可拖动/可拖放代码添加到ajax加载的div本身来使其工作。 所以上面的内容会像这样修改
Ajax加载的代码
<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
<p> </p>
</div>
<script>
$(function() {
$( ".draggable" ).draggable({
helper:'clone',
appendTo: 'body',
scroll: false //stops scrolling container when moved outside boundaries
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
这些脚本行将从主页中删除
Ajax是异步的 。 因此,如果您先调用一些ajax,然后再调用其他命令,则ajax通常将在此之后完成。
这是回调有用的地方。 尝试将回调添加到ajax load
调用中,如下所示: http : //api.jquery.com/load/
就像是:
$( "#site-preview" ).load( "/site/preview", function(){
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
旁注:您可能应该开始使用脚本而不是<script>
标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.