拖拽表格行至目标表格Name列失败的技术求助

我看你已经搞定了跨表格的行拖拽，但卡在了没法把源数据精准放到目标表格Name列的问题上——这主要是因为源表格和目标表格的行结构不匹配：源行只有单个<td>，而目标行是多列结构，直接拖拽整行进去会破坏目标表格布局，自然没法精准对应到Name列。下面给你一套落地的修改方案：

核心思路 #

1. 拖拽时提取源行的关键文本（比如医院名称）
2. 在目标表格接收拖拽元素时，创建符合目标结构的新行，把内容精准放到Name列
3. 调整拖拽交互逻辑，让定位更贴合列的范围

修改后的完整代码 #

JavaScript 部分 #

$(document).ready(function() {
    var $tabs = $('#table-draggable2');
    $("tbody.connectedSortable")
        .sortable({
            connectWith: ".connectedSortable",
            items: "> tr:not(:first)", // 排除源表格的搜索行
            appendTo: $tabs,
            helper: function(e, tr) {
                // 自定义拖拽助手，只显示要拖拽的名称，避免源结构干扰
                var text = tr.find('span').text().trim();
                return $('<tr><td colspan="4" style="background:#f5f5f5; padding:8px;">' + text + '</td></tr>');
            },
            zIndex: 999990,
            tolerance: 'intersect', // 让拖拽时更容易定位到列区域
            receive: function(event, ui) {
                // 核心：处理目标表格接收拖拽元素的逻辑
                var sourceText = ui.item.find('span').text().trim();
                // 删除默认添加的源行（结构不符合目标表格）
                $(this).find(ui.item).remove();
                // 创建符合目标表格结构的新行，把名称放到Name列
                var rowCount = $(this).find('tr').length;
                var newRow = $('<tr>' +
                    '<td><input type="checkbox"></td>' +
                    '<td>' + (rowCount + 1) + '</td>' + // 自动生成序号
                    '<td>' + sourceText + '</td>' +
                    '<td><input type="text" class="form-control" placeholder="设置时间"></td>' +
                    '</tr>');
                // 替换占位符，插入到拖拽放置的位置
                $(this).find('.ui-sortable-placeholder').replaceWith(newRow);
            }
        })
        .disableSelection();

    // 保留标签页的droppable，防止拖拽到标签区域
    var $tab_items = $(".nav-tabs > li", $tabs).droppable({
        accept: ".connectedSortable tr",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            return false;
        }
    });
});

HTML 结构修正（修复原代码的闭合错误） #

原HTML里有几个多余的</div>标签，先修正避免结构混乱：

<div class="page-content-wrapper">
    <div class="page-content">
        <h3 class="page-title">Route Details</h3>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-lg-4">
                <div class="form-group">
                    <label class="control-label"> Route Name</label>
                    <input type="text" name="route_name" id="route_name" class="form-control" value="" />
                </div>
            </div>
            <div class="col-lg-8"></div>
        </div>
        <div class="row">
            <div class="col-lg-2">
                <label class="control-label"> Day</label>
            </div>
            <div class="col-lg-2">
                <select class="form-control input-medium pull-right">
                    <option value="">Select Day</option>
                    <option value="">Saturday</option>
                    <option value="">Sunday</option>
                    <option value="">Monday</option>
                    <option value="">Tuesday</option>
                    <option value="">Wednesday</option>
                    <option value="">Thursday</option>
                    <option value="">Friday</option>
                </select>
            </div>
            <div class="col-lg-8"></div>
        </div>
        <div class="row">
            <div class="col-lg-4">
                <label class="control-label">Description</label><br>
                <textarea rows="4" cols="50" name="" class="form-control"></textarea>
            </div>
            <div class="col-lg-8"></div>
        </div>
        <br>
        <div class="row">
            <div class="col-lg-4">
                <div class="drag-row">
                    <table class="table table-bordered table-hover" id="table-draggable1">
                        <tbody class="connectedSortable">
                            <tr>
                                <td>
                                    <input type="text" name="route_name" id="route_name" class="form-control" value="" placeholder="Search" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span><input type="checkbox" value="Abc Hospital" name="check-tab1" > Abc Hospital</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span><input type="checkbox" value="XYZ Hospital" name="check-tab1" > XYZ Hospital</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span><input type="checkbox" value="ABM Laboratory" name="check-tab1" > ABM Laboratory</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-lg-6">
                <table class="table table-bordered table-hover" id="table-draggable2">
                    <thead>
                        <tr>
                            <th></th>
                            <th> No </th>
                            <th> Name </th>
                            <th> Pick Up Time </th>
                        </tr>
                    </thead>
                    <tbody class="connectedSortable">
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>1</td>
                            <td>Abc Hospital</td>
                            <td>10:34:56</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>2</td>
                            <td>Abc Hospital</td>
                            <td>10:34:57</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>3</td>
                            <td>Abc Hospital</td>
                            <td>10:34:58</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-10"></div>
        </div>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </div>
</div>

关键修改点说明 #

• 自定义拖拽助手：拖拽时只展示要移动的医院名称，既让用户清晰感知拖拽内容，又避免源行的单单元格结构干扰目标表格布局。
• Receive事件处理：这是解决精准放置的核心——在目标表格接收拖拽元素时，先删除默认添加的不符合结构的源行，再创建完全匹配目标表格的新行，把提取到的名称精准放到Name列，还自动生成了序号，给时间列加了输入框方便编辑。
• 拖拽定位优化：把tolerance设为intersect，让拖拽时只要元素和目标列区域有交集就能触发放置，提升交互的流畅度。
• HTML结构修复：修正了原代码中多余的闭合标签，避免页面布局错乱影响拖拽逻辑。

这样修改后，你拖拽源表格的行到目标表格时，就会自动把名称放到Name列，同时完美保留目标表格的结构啦！

内容的提问来源于stack exchange，提问作者Subash Kumar KR