页面加载后动态渲染的jquery-ui ui-draggable元素无法拖拽如何解决

问题核心原因 #

draggable()方法只能绑定到调用时已经存在于DOM树中的元素，你页面初始加载完成后才渲染动态HTML，初始执行的绑定逻辑找不到目标元素，同时你手动硬编码ui-draggable、ui-droppable类的操作，会让jquery-ui判定对应元素已经完成初始化，跳过绑定流程，因此出现无效果也无报错的情况。

解决步骤 #

1. 先移除你手动添加的ui-draggable、ui-droppable类，这些类由jquery-ui初始化时自动生成，不需要手动编写。
2. 调整初始化函数的执行时机：在动态HTML插入DOM的逻辑执行完成后，立刻调用初始化方法，同时补充droppable元素的初始化逻辑：

// 你的动态HTML渲染函数示例
function renderElements() {
  // 这里是你插入动态HTML的原有逻辑，比如$("body").append(动态元素代码)
  // 插入完成后立刻执行拖拽、投放功能初始化
  update_draggy_boxes()
  $(".ltarget").droppable()
}

3. 优化选择器匹配逻辑，你当前使用的[class^=draggy]仅匹配class属性以draggy开头的元素，若元素有多个类且draggy不在首位会匹配失败，建议调整为：

function update_draggy_boxes(){
  // 匹配所有class包含draggy的元素，同时过滤已经初始化过的元素避免重复绑定
  $("[class*='draggy']:not(.ui-draggable)").draggable();
}

4. 若你的动态HTML是基于异步请求（如AJAX）拉取数据后渲染，需要将初始化逻辑放到异步请求的成功回调函数中，确保DOM渲染完成后再执行绑定。

排查确认项 #

确保页面依赖引入顺序正确：先引入jQuery，再引入jQuery UI，且二者版本兼容。

内容的提问来源于stack exchange，提问作者Evan Gertis