javascript - 拖放，拖拽元素id和拖放位置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>