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

不知道是否有人可以帮忙，基本上我有两个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>

$（文档）.ready（函数（）{
var-currentParent；
$（“.image”）。可调整大小({
遏制：“家长”
}).拖拉({
还原：“无效”，
开始：函数（）{
currentParent=$（this.parent（）.attr（'id'）；
}
});
$（'#container2'）。可拖放({
接受：'.image'，
drop：函数（事件、用户界面）{
if（currentParent！=$（this）.attr（'id'））{
$（ui.draggable）.appendTo（$（this））.removeAttr（'style'）；
警报（“掉入工作区”）；
}
}
});
$（'#container1'）。可拖放({
接受：'.image'，
drop：函数（事件、用户界面）{
if（currentParent！=$（this）.attr（'id'））{
$（ui.draggable）.appendTo（$（this））.removeAttr（'style'）；
警报（“放回菜单”）；
}
}
});
$.ajax（{
url:'images/retrieve_images.php'，
数据：“页面id=”+encodeURIComponent（页面id），
数据类型：“json”，
成功：功能（数据）{
$。每个（数据、函数（i、val）{
$。每个（val，函数（k，v）{
$（“”）。附加到（“#容器1”）；
});
});
}
});
});

如果我运行静态图像，它的效果会非常好：

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

<div id="container2"></div>

---

Dragable无法工作的原因

当您第一次初始化

draggable（）

时，这些元素不在那里，因此不会被绑定。所以你需要在添加后绑定它

解决方案-1

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

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

成功：函数（数据）{
$。每个（数据、函数（i、val）{
$。每个（val，函数（k，v）{
$（“”）。附加到（“#容器1”）；
});
});
函数dragable（）//添加了函数调用
}

Dragable无法工作的原因

当您第一次初始化

draggable（）

时，这些元素不在那里，因此不会被绑定。所以你需要在添加后绑定它

解决方案-1

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

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

成功：函数（数据）{
$。每个（数据、函数（i、val）{
$。每个（val，函数（k，v）{
$（“”）。附加到（“#容器1”）；
});
});
函数dragable（）//添加了函数调用
}

将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");
        });
    });

    }

});

$.ajax（{
url:'images/retrieve_images.php'，
数据：“页面id=”+encodeURIComponent（页面id），
数据类型：“json”，
成功：功能（数据）{
$。每个（数据、函数（i、val）{
$。每个（val，函数（k，v）{
$("")
.拖拉({
还原：“无效”，
开始：函数（）{
currentParent=$（this.parent（）.attr（'id'）；
}
}).附于（“集装箱1”）；
});
});
}
});

将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");
        });
    });

    }

});

$.ajax（{
url:'images/retrieve_images.php'，
数据：“页面id=”+encodeURIComponent（页面id），
数据类型：“json”，
成功：功能（数据）{
$。每个（数据、函数（i、val）{
$。每个（val，函数（k，v）{
$("")
.拖拉({
还原：“无效”，
开始：函数（）{
currentParent=$（this.parent（）.attr（'id'）；
}
}).附于（“集装箱1”）；
});
});
}
});

由于将元素绑定到事件时图像还不存在，因此必须使用

delegate（）

或

on（）

将事件绑定到代理。由于将元素绑定到事件时图像还不存在，因此必须使用

delegate（）

或

on（）

将事件绑定到代理。感谢Rino，我现在明白你在没有任何可用元素的情况下初始化draggable的意思了。现在它工作得很好，再次感谢。谢谢Rino，我现在明白你在没有任何可用元素的情况下初始化draggable的意思了。现在它工作得很好，再次感谢。