Jquery在Ajax上的拖放加載Div

我希望能夠將頁面上的元素拖入ajax加載的div內的可拖拽元素。當我將droppable元素放置在常規頁面中時，我可以讓代碼工作，但當我在ajax加載的div上具有相同的元素時，不會。林非常確定，因爲我調用腳本的方式，以及它們如何加載在DOM上，但我找不到解決方案。注意：我曾嘗試調用在調用jquery ui之前加載ajax內容的代碼，但那也不起作用。下面是我如何調用所有內容，爲了簡潔起見，我刪除了無關的代碼。Jquery在Ajax上的拖放加載Div

主頁

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

來源

2014-08-28 Severian

這追加的當時不存在的元素。要解決這個問題，您可以使用可以附加到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。

來源

2014-08-28 14:45:47 gaelgillard

嗯，我能得到它通過將可拖動/可棄代碼到AJAX加載DIV本身的工作。所以上面將得到修正，像這樣因爲你嘗試調用上的droppable

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>

而那些臺詞將被取出主頁

來源

2014-08-28 14:44:24 Severian

阿賈克斯是異步。所以如果你調用一些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>標籤。

來源

2014-08-28 14:48:30 slicedtoad

Jquery在Ajax上的拖放加載Div

回答

相關問題