jQuery在Ajax上加載Div拖放

Question

我希望能夠將頁面上的元素拖動到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>

Answer 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功能的其他信息。 回調可以接受參數，並且可以用於例如檢查其是否為404。

Answer 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>

這些腳本行將從主頁中刪除

Answer 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>標簽。

jQuery在Ajax上加載Div拖放

問題描述

3 個解決方案

解決方案1
1 已采納 2014-08-28 14:45:47

解決方案2
0 2014-08-28 14:44:24

解決方案3
0 2014-08-28 14:48:30

jQuery在Ajax上加載Div拖放

問題描述

3 個解決方案

解決方案1 1 已采納 2014-08-28 14:45:47

解決方案2 0 2014-08-28 14:44:24

解決方案3 0 2014-08-28 14:48:30

解決方案1
1 已采納 2014-08-28 14:45:47

解決方案2
0 2014-08-28 14:44:24

解決方案3
0 2014-08-28 14:48:30