拖拽Card-Container元素时，如何获取其父级文本并绑定drag_start函数？

看起来你卡在了正确定位目标元素和事件绑定这两个点上，我来帮你梳理清楚：

问题根源分析 #

你之前的代码可能踩了两个坑：

1. ev.target不一定是.Card-Container本身——因为你拖拽的是黑色标题框（它是.Card-Container的子元素），所以ev.target指向的是标题框，拿到的id也不是容器的id，后续的parents()选择器自然跑偏了。
2. 事件绑定可能没关联到正确的元素，导致函数里的DOM查找逻辑失效。

修正后的解决方案 #

第一步：修复drag_start函数逻辑

我们先确保能精准找到.Card-Container，再根据DOM结构定位"Urgent Doing"文本：

function drag_start(ev) {
  // 找到当前拖拽元素所属的.Card-Container容器（不管拖拽的是哪个子元素）
  const cardContainer = ev.target.closest('.Card-Container');
  if (!cardContainer) return; // 容错：防止找不到容器的情况

  // 这里根据你的实际DOM结构调整选择器，以下是两种常见场景：
  // 场景1："Urgent Doing"是.Card-Container父元素的前一个兄弟元素的文本
  const statusText = $(cardContainer).parent().prev().text().trim();
  
  // 场景2："Urgent Doing"是.Card-Container父元素下的某个子元素文本（比如带.status类的元素）
  // const statusText = $(cardContainer).parent().find('.status').text().trim();

  console.log('目标状态文本:', statusText); // 应该输出"Urgent Doing"

  // 如果你需要卡片ID，直接从容器获取即可
  const cardid = cardContainer.id;
  console.log('卡片ID:', cardid);
}

第二步：确保事件正确绑定

推荐用分离结构与行为的方式绑定事件，避免在HTML里写内联事件：

// 页面加载完成后绑定事件
$(document).ready(function() {
  // 绑定到.Card-Container本身（如果整个卡片都可拖拽）
  $('.Card-Container').on('dragstart', drag_start);

  // 或者绑定到黑色标题框（仅手柄可拖拽）
  // $('.drag-handle').on('dragstart', drag_start);
});

同时要确保你的.Card-Container（或拖拽手柄）设置了draggable="true"：

<div class="Card-Container" id="your-card-id" draggable="true">
  <div class="drag-handle">黑色标题框</div>
  <!-- 其他卡片内容 -->
</div>

关键知识点 #

• closest('.Card-Container')：从当前元素向上查找，返回第一个匹配的祖先元素，完美解决子元素触发事件时找不到父容器的问题。
• trim()：去除文本前后的空格，避免拿到空字符串或多余空白内容。

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