jQuery在Ajax上加载Div拖放
[英]Jquery Drag and Drop on Ajax loaded Div
问题描述
I want to be able to drag an element on the page into a droppable element inside an ajax loaded div. 
我希望能够将页面上的元素拖动到ajax加载的div内的droppable元素中。 I can get the code to work when I place the droppable element in the regular page but not when i have the same element on the ajax loaded div. 当我将droppable元素放置在常规页面中时，而在ajax加载的div中具有相同元素时，我可以使代码工作。 Im pretty sure its because of the way I'm calling scripts and how they load on the dom, but I can't find the solution. 我非常确定这是因为我调用脚本的方式以及它们在dom上的加载方式，但是我找不到解决方案。 Note: I have tried calling the code which loads the ajax content before calling jquery ui but that didn't work either. 注意：我已经尝试在调用jquery ui之前调用加载ajax内容的代码，但这也不起作用。 Here is how I'm calling everything, I removed the extraneous code for brevity. 这就是我的所有调用方式，为简洁起见，我删除了多余的代码。
main page 主页
<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 loaded code Ajax加载的代码
<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
<p> </p>
</div>
3 个解决方案
解决方案1
1 已采纳 2014-08-28 14:45:47
This appends because you try to call the droppable on a non-existing element at that moment. 之所以追加，是因为您当时试图在不存在的元素上调用droppable 。 To solve this, you could use the callback function that can be attached to the load function and run the rest after that. 为了解决这个问题，您可以使用可以附加到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!" );
}
});
});
});
You can find other information about the load function here . 您可以在此处找到有关load功能的其他信息。 The callback can take arguments and can be used, for example to check if it's a 404 or not. 回调可以接受参数，并且可以用于例如检查其是否为404。
解决方案2
0 2014-08-28 14:44:24
Well I was able to get it to work by adding the draggable/droppable code to the ajax loaded div itself. 好吧，我可以通过将可拖动/可拖放代码添加到ajax加载的div本身来使其工作。 So the above would be amended like so 所以上面的内容会像这样修改
ajax loaded code 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>
And those script lines would be taken out of the main page 这些脚本行将从主页中删除
解决方案3
0 2014-08-28 14:48:30
Ajax is Asynchronous . Ajax是异步的 。 So if you call some ajax and then call some other command, the ajax will usually finish afterwards. 因此，如果您先调用一些ajax，然后再调用其他命令，则ajax通常将在此之后完成。
This is where callbacks are useful. 这是回调有用的地方。 Try adding a callback to the ajax load call as shown here: http://api.jquery.com/load/ 尝试将回调添加到ajax load调用中，如下所示： http : //api.jquery.com/load/
Something like: 就像是：
$( "#site-preview" ).load( "/site/preview", function(){
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
Side note: you should probably start using scripts instead of <script> tags. 旁注：您可能应该开始使用脚本而不是<script>标签。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.