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