如何在拖拽数据库生成的Draggable Div至放置区域时获取输入框值？

我明白你遇到的困扰了——通过数据库生成的可拖拽Div，在dropHandler事件里拿不到内部input的值，总是显示为空。咱们一步步来排查和解决这个问题：

第一步：先确认拖拽元素的结构 #

首先你可以先在handleDropEvent里打印拖拽过来的元素，看看它是不是真的包含input，以及input有没有正确的value值：

function handleDropEvent (event, ui) {
    $(this).append(ui.draggable);
    var droppedElement = ui.draggable;
    // 打印元素结构，检查input是否存在
    console.log("拖拽元素结构：", droppedElement[0]);
    // 尝试获取input值
    var inputValue = droppedElement.find('input').val();
    console.log("当前input值：", inputValue);
}

常见原因及解决办法 #

1. 拖拽用了克隆模式（helper: 'clone'） #

如果你的draggable设置了helper: 'clone'，那么ui.draggable指向的是克隆出来的元素，而克隆的input默认不会携带原元素的输入值。这时候要从原始元素里取值：

function handleDropEvent(event, ui) {
    $(this).append(ui.draggable);
    // 克隆模式下，通过ui.draggable.original获取原始元素
    var originalElement = ui.draggable.original;
    var inputValue = originalElement.find('input').val();
    console.log("原始元素的input值：", inputValue);
}

2. 数据库生成的HTML结构有问题 #

检查数据库生成的Div内部input是否正确设置了value属性——如果只是用了placeholder或者动态渲染时没绑定值，那自然拿不到内容。正确的结构应该是这样：

<div class="drag">
  <!-- 确保input有value属性，哪怕是空也要显式写出来 -->
  <input type="text" value="数据库生成的实际值">
</div>

3. 选择器不够精准 #

如果你的Div里有多个input，或者input有特定的类型/类名，要使用更明确的选择器来定位：

// 比如只获取文本类型的input
var inputValue = droppedElement.find('input[type="text"]').val();
// 或者通过类名定位
var inputValue = droppedElement.find('.target-input').val();

完整示例代码 #

这里给你一个包含各种情况处理的完整代码，你可以直接参考：

$(init);
function init() {
    $(".drag").draggable({
        start: handleDragStart,
        cursor: 'move',
        revert: "invalid",
        // 如果开启克隆模式，下面的取值逻辑会自动适配
        // helper: 'clone'
    });
    $("#drop").droppable({
        drop: handleDropEvent,
        tolerance: "touch",
    });
}
function handleDragStart(event, ui) {
    $(this).css('z-index', 9999);
}
function handleDropEvent(event, ui) {
    $(this).append(ui.draggable);
    var droppedElement = ui.draggable;
    let inputValue;

    // 判断是否是克隆拖拽模式
    if (ui.helper.hasClass('ui-draggable-clone')) {
        // 克隆模式：取原始元素的input值
        inputValue = droppedElement.original.find('input').val();
    } else {
        // 非克隆模式：直接取当前拖拽元素的input值
        inputValue = droppedElement.find('input').val();
    }

    console.log("获取到的Input值：", inputValue);
    // 这里可以写你的后续处理逻辑
}

先通过console.log确认元素结构和值的情况，再根据上面的原因调整代码，应该就能解决问题啦！

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