拖拽元素至放置区域时，如何获取其中输入框的文本值？

首先咱们来拆解下你代码里的问题：

• 你用ui.draggable.find('#name')是在**被拖拽的元素（.drag）**里找输入框，但你的#name明明在放置区域#droparea里啊！这就像在抽屉里找冰箱里的东西，肯定找不到，返回undefined太正常了。
• 退一步说，就算找到了输入框，html.value也是错误写法——jQuery里获取输入框值要用.val()，原生JS则是DOM元素的.value属性，html是用来获取元素文本/HTML内容的，和输入框的值完全不相关。

下面给你两种可行的解决方案，适配不同的技术栈：

方案一：基于jQuery UI实现 #

如果你的项目已经在用jQuery UI的拖拽组件，代码可以这么写：

$(function() {
  // 初始化拖拽元素
  $(".drag").draggable();
  
  // 初始化放置区域并处理drop事件
  $("#droparea").droppable({
    drop: function(event, ui) {
      // 方法1：直接通过id获取输入框（id是全局唯一的，简单直接）
      const inputValue = $("#name").val();
      
      // 方法2：从放置区域内部查找（更严谨，适合页面有多个同name输入框的场景）
      // const inputValue = $(this).find('#name').val();
      
      console.log(inputValue); // 这里会输出"world"
    }
  });
});

核心逻辑：在drop事件里，$(this)指向的是放置区域#droparea，所以$(this).find('#name')能精准定位到目标输入框，再用.val()就能拿到它的值。

方案二：原生JS实现（无依赖） #

如果不想用jQuery，用原生JS的拖拽API也能搞定：

<div id="droparea">
  <input type="text" name="name" id="name" value="world" />
</div>
<div class="drag" draggable="true"> Example A </div>

<script>
const dragEl = document.querySelector('.drag');
const dropArea = document.getElementById('droparea');

// 拖拽开始时设置数据（可选，仅作示例）
dragEl.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.textContent);
});

// 允许放置（必须阻止默认行为，否则无法触发drop事件）
dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
});

// 处理放置事件
dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  // 获取放置区域内输入框的值
  const inputValue = document.getElementById('name').value;
  console.log(inputValue); // 输出"world"
});
</script>

这个方案里，我们直接在drop事件中通过id定位输入框，访问它的.value属性就能拿到目标值。

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