如何在将子div拖到另一个div

Question

我正在编写拖放代码。我想将一个子div从父div拖到另一个父div，我怎样才能得到父div的id值和另一个父div的id，其中可拖动的子div被删除。 我正在编写下面的代码。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我正在附加图片

在该图像中，每个像ganesh这样的名字都在可拖动的子div下，看起来像盒子（总共3个）是可放置的父div。

Answer 1

在drag(ev)中，this是window。使用$(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);
}