Ajax加载Div上的Jquery拖放答案

【问题标题】：Jquery Drag and Drop on Ajax loaded DivAjax加载Div上的Jquery拖放
【发布时间】：2014-08-28 14:18:22
【问题描述】：

我希望能够将页面上的元素拖到加载 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>

【问题讨论】：

标签： javascript jquery ajax jquery-ui drag-and-drop

【解决方案1】：

这是因为您当时尝试在不存在的元素上调用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。

【讨论】：

【解决方案2】：

我能够通过将可拖放/可拖放代码添加到 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>

这些脚本行将从主页中取出

【讨论】：

【解决方案3】：

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> 标签。

【讨论】：