jQuery Droppable拖拽无法向PHP文件传递列表项ID问题求解

问题背景 #

正在开发一款CMS页面构建器，测试地址为：CMS页面构建器测试入口，当前需要实现「模板」标签页下的组件拖拽逻辑：

• 拖拽列表项放入目标容器时，不直接放置拖拽的图片元素
• 获取被拖拽列表项的ID，调用PHP脚本从数据库拉取对应HTML内容渲染到容器中
• 后续支持已插入内容的排序功能

当前基于jQuery Droppable和Sortable实现拖拽交互，遇到两个核心问题：

1. 无法阻止原图片元素被直接放入目标容器
2. 被拖拽项的ID无法成功传递到后端get_component.php文件

现有代码 #

可拖拽列表项代码 #

<ul>
    <li id="1" class="draggable ui-state-highlight"><img src="../../images/com_hero.png" /></li>
    <li id="2" class="draggable ui-state-highlight"><img src="../../images/com_img_text_button.png" /></li>
    <li id="3" class="draggable ui-state-highlight"><img src="../../images/com_text_button_img.png" /></li>
    <li id="4" class="draggable ui-state-highlight"><img src="../../images/3-column-features.png" /></li>
</ul>

原有拖拽交互逻辑 #

<script>
    $('#sortable').droppable({
    accept: 'li'
    drop: function(event, ui){
    var id=$(ui.draggable).attr('id');
    $.ajax({
        url: 'get_component.php',
        type: 'POST',
        data: {id: id},
        success: function(data){
        //NOT SURE WHAT GOES HERE
        }
        })
        }
    });
    $('img.draggable').draggable();//assuming all draggable images have a draggable class
</script>

后端get_component.php通过$_POST['id']接收参数，但始终无法获取到传递的ID值，查阅官方文档后仍未定位问题。

问题根因与修复方案 #

问题根因 #

1. 拖拽元素绑定错误：原有代码将draggable()绑定到img.draggable元素，但实际存储组件ID的是外层li标签，且draggable类直接挂载在li上而非内部img，导致ui.draggable取到的是无ID的img节点，无法向后端传递正确参数
2. 未配置拖拽辅助元素与还原逻辑，拖拽时会直接移动原DOM节点，默认行为会将拖拽的图片直接插入目标容器，跳过自定义渲染流程
3. drop事件未拦截默认插入行为，没有阻断原生拖拽放置的DOM操作

修复后完整前端代码 #

// 正确给带ID的li元素绑定draggable，配置辅助元素和还原逻辑
$('li.draggable').draggable({
    helper: "clone", // 拖拽时使用克隆副本，不移动侧边栏原组件元素
    revert: "invalid", // 未放到合法放置区域时自动回到原位置
    cursor: "move"
});

// 目标容器同时初始化sortable和droppable，兼容新组件插入+已有组件排序
$('#sortable').sortable({
    revert: true,
    cursor: "move"
}).droppable({
    accept: 'li.draggable', // 只接收侧边栏带draggable类的组件li
    drop: function(event, ui){
        // 拦截默认的DOM插入行为，阻止原图片被放入容器
        event.preventDefault();
        // 此时ui.draggable为带ID的li元素，可正确读取组件ID
        const componentId = ui.draggable.attr('id');
        
        $.ajax({
            url: 'get_component.php',
            type: 'POST',
            data: {id: componentId},
            dataType: 'html', // 明确指定返回数据类型为HTML片段
            success: function(componentHtml){
                // 将后端返回的组件HTML插入容器，自动兼容sortable排序逻辑
                $('#sortable').append(componentHtml);
            },
            error: function(){
                alert('组件加载失败，请重试');
            }
        })
    }
});

后端接收校验参考 #

在get_component.php开头可增加参数校验，快速确认ID接收状态：

<?php
// 调试阶段可打开下方注释，查看POST参数传递情况
// var_dump($_POST); exit;
if (!isset($_POST['id']) || !is_numeric($_POST['id'])) {
    http_response_code(400);
    exit('无效的组件ID');
}
$componentId = intval($_POST['id']);
// 后续编写从数据库拉取对应组件HTML的逻辑即可
?>

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