我希望能够将页面上的元素拖动到 ajax 加载的 div 内的可放置元素中。当我将可放置元素放在常规页面中时，我可以使代码工作，但当我在 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函数的其他信息here 。回调可以接受参数并且可以使用，例如检查它是否是 404。
关于javascript - Jquery 在 Ajax 加载的 Div 上拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25551103/