javascript在拖动开始时获取父div答案

【问题标题】：javascript get parent div on drag startjavascript在拖动开始时获取父div
【发布时间】：2018-05-06 02:25:27
【问题描述】：

当我拖动 div class="Card-Container" 时，我正在尝试获取文本 Urgent Doing。我已经正确地获得了 id（通过 JS），但我不确定如何获得作为 Card-Container 父级的类的值。我试过this SO solution，但不知道如何让它正确绑定到drag_start函数。

要查看输出，请尝试拖动黑色标题框

    function drag_start(ev) {
        var cardid = ev.target.id;
        var classtext = $('#'+cardid).parents("div").prev().text();//$(cardid).parents("div").prev().text()
        ev.dataTransfer.setData("elem_id", cardid);
        ev.dataTransfer.setData("div_from_classname", classtext);//Lane-Title-2
        console.log("picked up card: " + cardid + " from div classname: " + classtext);
    }

    <html>
    <head></head>
    <body>
    
    <div class="Lane-Container-2">
      <div class="Lane-Title-2">Urgent Doing</div>
      <div class="Lane-Area-2">
                <div class="Card-Container" draggable="true" ondragstart="drag_start(event)" id="11111">
                <div class="Card-Title" style="background-color: black; border-color: black;" onclick="">xxx</div>
                <div class="Card-Body" style="background-color:@i.TypeColorHex; border-color: @i.TypeColorHex;">yyy</div>
            </div>
      </div>
    </div>  

    <div class="Lane-Container-2">
      <div class="Lane-Title-2">2.....Urgent Doing</div>
      <div class="Lane-Area-2">
                <div class="Card-Container" draggable="true" ondragstart="drag_start(event)" id="22222">
                <div class="Card-Title" style="background-color: black; border-color: black;" onclick="">xxx</div>
                <div class="Card-Body" style="background-color:@i.TypeColorHex; border-color: @i.TypeColorHex;">yyy</div>
            </div>
      </div>
    </div>  
    </body>

【问题讨论】：

标签： javascript html drag-and-drop jquery-ui-draggable

【解决方案1】：

您可以使用$(".Card-Container").parents("div").prev().text()获取所需的div文本

console.log($(".Card-Container").parents("div").prev().text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="Lane-Container-2">
  <div class="Lane-Title-2">Urgent Doing</div>
  <div class="Lane-Area-2">
            <div class="Card-Container" draggable="true" ondragstart="drag_start(event)" id="@i.Id">
            <div class="Card-Title" style="background-color: black; border-color: black;" onclick="">xxx</div>
            <div class="Card-Body" style="background-color:@i.TypeColorHex; border-color: @i.TypeColorHex;">yyy</div>
        </div>
  </div>
</div>

【讨论】：

这行得通，如果 Card-Container 是页面上唯一的东西，但不幸的是页面上还有更多内容（请参阅我修改后的示例）
您的页面上不应有相同的ids。
已修复，谢谢，它们在我的 Razor foreach 循环中有所不同，但我在示例中省略了该部分
正如您已经提到的，您已经获得了 id。只需将类选择器替换为 $("#1122").parents("div").prev().text() 之类的 id 选择器即可
很有趣，刚刚在我上面的帖子中尝试过，但在我的代码中我得到了 classname=(blank) 并且在 SO 上的 sn-p 中我得到一个关于 $的错误

【解决方案2】：

试试这样：

....
ev.dataTransfer.setData("div_from_classname", $(this).parent().className);
....

【讨论】：

返回undefined
$(this) 可能会返回事件，但不会返回元素本身。如果 ev.target.id 正确返回了 ID，则获取整个子元素，以便父元素返回整个 div。