拖拽，拖拽元素id和放置位置id答案

【问题标题】：Drag and drop, the drag element id and where to drop id拖拽，拖拽元素id和放置位置id
【发布时间】：2017-04-04 09:52:18
【问题描述】：

我正在使用 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>

谢谢

【问题讨论】：

你想拖放哪个 id
这个：我忘了放那里抱歉：
你想把它放在哪里
我更正了帖子，我想把它放到另一个 div 中
你想拖动“drag5”这个div，但是没有提到你想放另一个div的地方

标签： javascript html drag-and-drop

【解决方案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>

【讨论】：

把你的javascript函数放在你的html之前@krn Rajput
@Mohamed Sadok Krichen：您的问题是否已解决

【解决方案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);
    }

【讨论】：