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

Question

I am writing code of drag and drop. I want to drag a child div from a parent div to another parent div, how can I get the value of id of parent div and the id of another parent div where the draggable child div are dropped . I am writing code below.

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

and I am attaching the image

in that image every name like ganesh is under draggable child div and looking like box(total 3) is droppable parent div .

Answer 1

In drag(ev) , this is the window . Use $(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);
}