javascript - 如何在将子div拖到另一个div时获取父div的id值

Question

我正在编写拖放代码。我想将一个子 div 从一个父 div 拖到另一个父 div，如何获取父 div 的 id 值以及可拖动子 div 所在的另一个父 div 的 id 。我正在下面编写代码。

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    ev.dataTransfer.setData("ter", $(this).closest("div"));
    var topi = $(this).closest("div");
    console.log('draggable= ' + topi)
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");

    var divid = ev.dataTransfer.getData("ter").toString();
    // var divid=$(this).closest('ul').attr('id');
    var topi = $(this).closest('div').attr('id');
    console.log(data);
    console.log('sss ' + topi);

    ev.target.appendChild(document.getElementById(data));
    $.ajax({
        type: "POST",
        url: "insertData.action",
        data: data,
        success: function (response) {
            // console.log(data);
        }
    });
}
</script>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <s:if test="inlist.size>0">
        <%
            int k = 1;
        %>
        <s:iterator id="sl" value="inlist">
            <div draggable="true" ondragstart="drag(event)" id='<s:property value="id"/>' width="88" height="31">
                <li>
                    <s:property value="name"/>
                </li>
            </div>
        </s:iterator>
    </s:if>
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

我正在附上图片

在该图像中，像 ganesh 这样的每个名称都位于可拖动的子 div 下，并且看起来像盒子(总共 3 个)是可放置的父 div。

Answer 1

在drag(ev)中，this是窗口。使用 $(ev.target).closest("div"):

function drag(ev) {
    var dragDivId = $(ev.target).closest("div")[0].parentElement.id;
    console.log(dragDivId);
}

function drop(ev) {
    var dropDivId = ev.target.id;
    console.log(dropDivId);
}