Question

想知道是否有人可以提供帮助，基本上我有两个div容器，都可以放置。容器1具有ajax填充的图像列表，并且每个图像可以从容器1拖动到容器2并再次返回。问题是它只适用于静态编码图像，但在使用来自ajax的动态内容时会丢失可拖动的能力（图像出现在容器1中，因此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

拖拽不起作用的原因

当您第一次初始化$('.image').draggable('destroy'); $('.image').draggable({ revert: 'invalid', start: function() { currentParent = $(this).parent().attr('id'); } });时，这些元素不在那里，所以它不会被绑定。所以你需要在添加后绑定它。

<强>解决方案-1

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

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

<强>解决方案-2

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

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
}

它看起来像这样

{{1}}

Answer 2

将 draggable 添加到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");
        });
    });

    }

});

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

2 个答案: