在将子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是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); 
}