在將子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下，而看起來box（total 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);
}