Question

当前的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之前正在工作，并且在它之后无法正常工作。那么，我在这里缺少什么？

Answer 1

尝试使用ajaxComplete()功能 - 它将在页面上的每次ajax调用后触发

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

更好的方法是在你的$ .ajax成功函数中再次调用draggable

$.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();
    }
});

Answer 2

检查这是否有效..

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

}).disableSelection();

如果这不起作用，请在将元素插入 DOM 后尝试使用.draggable()。

在DOM更新后使用draggable

2 个答案: