使用可拖動DOM更新後

當前的DOM是這樣的：使用可拖動DOM更新後

<div id="image_list"> 

</div>

一個事件後，這將更新到：

<div id="image_list"> 
    <img class="dragable-img" src="image1.png" /> 
    <img class="dragable-img" src="image2.png" /> 
    <img class="dragable-img" src="image3.png" /> 
    <img class="dragable-img" src="image4.png" /> 
</div>

現在有在頁面中的JS是應該處理拖動

$('.dragable-img').draggable({ 
     revert: true, 
      handle: 'img', 
      containment: "#content-body", 
      scroll: false 
}).disableSelection();

顯然，更新DOM之前工作，它不AFTE工作它。那麼，我在這裏錯過了什麼？

來源

2012-11-30 Alireza

如何你在操縱dom嗎？使用ajax？還是全部是客戶？ –

@ wirey〜當使用Ajax更改下拉列表時，我更新div內容。 – Alireza

嘗試使用ajaxComplete()功能 - 頁面

$('#image_list').ajaxComplete(function(){ 
    $('.dragable-img',this).draggable({ 
     revert: true, 
     handle: 'img', 
     containment: "#content-body", 
     scroll: false 
    }).disableSelection(); 
)};

更好的方式在每次Ajax調用後就會觸發將裏面的$就成功函數調用拖動再次

$.ajax({ 
    url:yoururl 
    success: function(){ 
     //do what you need.. update/add to your dom 
     //then call draggable on your elements 
     $('.dragable-img').draggable({ 
      revert: true, 
      handle: 'img', 
      containment: "#content-body", 
      scroll: false 
     }).disableSelection(); 
    } 
});

來源

2012-11-30 22:11:14

這個作品謝謝親愛的。 – Alireza

不客氣:)高興地幫忙 –

檢查，如果這個工程..

$('#image_list').on('draggable', '.dragable-img' , function(){ 
    return { 
      revert: true, 
      handle: 'img', 
      containment: "#content-body", 
      scroll: false 
    } 

}).disableSelection();

如果這不起作用..元素插入DOM後嘗試使用.draggable()。

來源

2012-11-30 21:41:52

我嘗試了兩種，不工作。 – Alireza

使用可拖動DOM更新後

回答

相關問題