拖放，拖動元素ID以及放置的位置編號

Question

我正在使用HTML5和JavaScript進行拖放操作，我想要獲取拖動元素的id和id所在的位置。

第一部分很容易，但得到id拖動那是我的問題。

這是我的HTML代碼：

<div class="form-group" ondrop="drop(event)" ondragover="allowDrop(event, this)" id="drop1" ondrop="getID(this, ev)" > 
 
<label class="col-sm-12 control-label">Equipe 1</label> 
 
</div>

<div class="form-group" draggable="true" ondragstart="drag(event)" id="drag5" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 
<table> 
 
    <tr> 
 
     <td><img alt="image" class="img-circle" src="img/profile_small.jpg" /></td> 
 
     <td><label class="control-label">Employé 4</label></td> 
 
    </tr> 
 
</table> 
 
</div>

這裏的JavaScript：

<script> 
 
      function allowDrop(ev) { 
 
       ev.preventDefault(); 
 
      } 
 

 
      function drag(ev) { 
 
       ev.dataTransfer.setData("text", ev.target.id); 
 
      } 
 

 
      function drop(ev) { 
 
       ev.preventDefault(); 
 
       var data = ev.dataTransfer.getData("text"); 
 
       ev.target.appendChild(document.getElementById(data)); 
 
       alert(document.getElementById(data).textContent+" Dropped"); 
 
      } 
 
</script>

謝謝

Answer 1

<style> 
 
#drag5 
 
{ 
 
    border: 1px solid #ccc; 
 
    color:blue; 
 
    width:300px; 
 
} 
 
#drop1 
 
{ 
 
    border: 1px solid #ccc; 
 
    color:blue; 
 
    width:500px; 
 
    height:200px; 
 
} 
 
</style> 
 

 
<script> 
 
function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
} 
 
</script> 
 

 
<div class="form-group" draggable="true" ondragstart="drag(event)" id="drag5" > 
 

 
<table> 
 
    <tr> 
 
     <td><img alt="image" class="img-circle" src="https://lh3.googleusercontent.com/-ekut6zqo6VY/AAAAAAAAAAI/AAAAAAAAACk/6qR5GAaQ00I/photo.jpg?sz=32" /></td> 
 
     <td><label class="control-label">Employé 4</label></td> 
 
    </tr> 
 
</table> 
 
</div> 
 
<br/><br/><br/> 
 

 
<div id="drop1" class="form-group" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 

 
<label class="col-sm-12 control-label">Equipe 1</label> 
 
</div>

你想拖動或刪除