Question

我正在使用HTML5和JavaScript进行拖放操作，我想获取拖动元素的ID和id拖动的位置。

第一部分很简单，但是把问题放在哪里，这就是我的问题。

这是我的代码HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

这里是Javascript：

＆＃13;

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

＆＃13;

谢谢

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>

Answer 2

警报消息可能会给您答案。

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
        alert(ev.target.id + document.getElementById(data).id);
    }

拖放，拖动元素id和删除id的位置

2 个答案: