javascript 在拖动开始时获得 parent div
javascript get parent div on drag start
我试图在拖动 div class="Card-Container"
时获取文本 Urgent Doing
。我已经正确地获得了 id(通过 JS),但我不确定如何获得 class 的值,即 Card-Container 的 parent。我尝试了 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>
您可以使用 $(".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>
这样试试:
....
ev.dataTransfer.setData("div_from_classname", $(this).parent().className);
....
我试图在拖动 div class="Card-Container"
时获取文本 Urgent Doing
。我已经正确地获得了 id(通过 JS),但我不确定如何获得 class 的值,即 Card-Container 的 parent。我尝试了 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>
您可以使用 $(".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>
这样试试:
....
ev.dataTransfer.setData("div_from_classname", $(this).parent().className);
....