JQuery失去了对ajax返回数据的可拖动能力

Question

想知道是否有人能帮忙，基本上我有两个div容器，都是可丢弃的。容器1有一个ajax填充的图像列表，每个图像都可以从容器1拖到容器2，然后再拖回来。问题是，它只适用于静态编码的图像，但在使用ajax的动态内容时失去了可拖动的能力（图像出现在Container1中，因此ajax部分正在工作）。如果有人能提出一个可能的解决方案，我真的很头疼。非常感谢。

<script>
$(document).ready(function(){
var currentParent;
        $(".image").resizable({
            containment: "parent"
        }).draggable({
            revert: 'invalid',
            start: function(){
                currentParent = $(this).parent().attr('id');
            }
        });
    $('#container2').droppable({
        accept:'.image',
        drop: function(event,ui){
            if (currentParent != $(this).attr('id')){
              $(ui.draggable).appendTo($(this)).removeAttr('style');
              alert("Dropped into workspace");
            }
        }
    });
    $('#container1').droppable({
        accept:'.image',
        drop: function(event,ui){
            if (currentParent != $(this).attr('id')){
              $(ui.draggable).appendTo($(this)).removeAttr('style');
              alert("Put back into menu");
            }
        }
    });
     $.ajax({  
      url: 'images/retrieve_images.php',    
      data: 'page_id='+ encodeURIComponent(page_id),
      dataType: 'json',
      success: function(data) {
        $.each(data, function(i, val) {
            $.each(val, function(k, v) {
                $("<div class='image'><img width='auto' height='100%' src='article_images/"+v.image_name+"'/></div>").appendTo("#container1");
            });
        });
        }
    });
});
</script>

如果我运行一个静态图像，它工作得很完美：

<div id="container1">
    <div class="image"><img width="auto" height="100%" src="article_images/c5cfe4711ec60b5a676ae386702a8051.png"/></div>
</div>
<div id="container2"></div>

Answer 1

Dragable不起作用的原因

当您第一次初始化draggable()时，这些元素不在那里，所以它不会被绑定。所以你需要在添加后绑定它。

解决方案-1

在AJAX成功中通过以下代码重新初始化可拖动

$('.image').draggable('destroy');
$('.image').draggable({
    revert: 'invalid',
    start: function() {
      currentParent = $(this).parent().attr('id');
    }
  }); 

解决方案-2

制作一个这样的函数，并在AJAX成功中调用它

function dragable() {
  $(".image").resizable({
    containment: "parent"
  }).draggable({
    revert: 'invalid',
    start: function() {
      currentParent = $(this).parent().attr('id');
    }
  });
}

它看起来像这个

success: function(data) {
  $.each(data, function(i, val) {
    $.each(val, function(k, v) {
      $("<div class='image'><img width='auto' height='100%' src='article_images/" + v.image_name + "'/></div>").appendTo("#container1");
    });
  });
  function dragable()// added the function call
}

Answer 2

将可拖动添加到ajax成功调用中的每个项目，如下所示

 $.ajax({  
  url: 'images/retrieve_images.php',    
  data: 'page_id='+ encodeURIComponent(page_id),
  dataType: 'json',
  success: function(data) {
    $.each(data, function(i, val) {
        $.each(val, function(k, v) {
            $("<div class='image'><img width='auto' height='100%' src='article_images/"+v.image_name+"'/></div>")
           .draggable({
                        revert: 'invalid',
                        start: function(){
                            currentParent = $(this).parent().attr('id');
                        }
           }).appendTo("#container1");
        });
    });
    }
});