JQuery UI可拖拽/可放置动态区域失效问题求助

嘿，这个问题我太熟悉了！你遇到的核心问题是事件绑定的时机不对：

页面加载完成后，你立刻给所有.snap-item元素初始化了droppable功能，但那些从AJAX动态拉取生成的区域，是在这之后才被添加到DOM中的——它们根本没机会被绑定上droppable的事件处理逻辑，所以拖拽到上面自然没反应。而硬编码的Meat1、Meat2在页面加载时就存在，所以能正常工作。

解决方案：把Droppable初始化逻辑抽成函数，在动态元素创建后立即绑定 #

我们可以把droppable的配置封装成一个可复用的函数，这样既可以初始化页面上已有的元素，也能在AJAX回调里给新生成的元素绑定功能：

1. 首先定义初始化droppable的函数：

function setupDroppable(element) {
  $(element).droppable({
    tolerance: "fit",
    accept: ".draggable",
    activeClass: "highlight",
    drop: function(event, ui){
      if(!confirm("Are you sure?")){
        ui.draggable.css({top: 0,left: 0});
        ui.helper.css({"background-color": ""});
      }else{
        console.log('dragged ' + ui.draggable.data('dragitem') + ' onto ' + $(this).data("myval"));
        $(this).removeClass("highlight").addClass("green");
      }
    },
    out: function (event, ui) {
      ui.helper.css({"background-color": ""});
      $(this).removeClass("green");
    }
  });
}

2. 修改页面初始化代码，用这个函数处理已有的硬编码元素：

$(function(){
  // 初始化拖拽元素
  $(".draggable").draggable({
    revert : function(event, ui){
      $(this).data("uiDraggable").originalPosition = {top : 0,left : 0};
      return !event;
    },
    containment : "#img-id",
    cancel: false
  });
  // 初始化页面上已有的.snap-item
  setupDroppable('.snap-item');
});

3. 在AJAX的success回调里，给每个新生成的元素立即调用初始化函数：

$.ajax({
  type: "POST",
  url: "queries/getCategories.php",
  dataType: 'json',
  cache: false,
  data:{store_id:storeid},
  success: function(data){
    $.each(data,function(i,j){
      // 创建新元素并保存到变量
      const newDropArea = $(`
        <div class='snap-item ui-widget-header' 
             data-myval='myval2' 
             style='left:${j.left_pos}%; top:${j.top_pos}%'>
          Testarea ${j.category_id}
        </div>
      `);
      $("#dynamic").append(newDropArea);
      // 关键：给新元素初始化droppable功能
      setupDroppable(newDropArea);
      console.log("top " + j.top_pos);
    });
  }
});

这样修改后，不管是页面一开始就有的droppable区域，还是AJAX动态生成的，都会被正确绑定事件，拖拽功能就能正常工作了。

内容的提问来源于stack exchange，提问作者George Feichter