javascript - ev.target.id 不返回元素 id

Question

问题和解决方案是什么？我在这里找不到任何错误

这是落点:

<div class="drophere" id="drophere_215" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="http://static.myface.photos/imagedynamically.aspx?image=/images/uploads/215.jpg" />
</div>

这是拖动点:

<span class="draghere" id="draghere_215" draggable="true" ondragstart="drag(event)">
<span>Georgia</span>
</span>

这是js代码:

<script type="text/javascript">

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");
  var shortData = data.replace('draghere_','');
  var dropElement = ev.target.id;

if(dropElement.indexOf(shortData) !== -1){
ev.target.appendChild(document.getElementById(data));
document.getElementById(ev.target.id).remove();
 }
}

</script>

Answer 1

确保丢弃的目标是父级 <div>而不是 <img>元素:

   function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        var shortData = data.replace('draghere_','');
        var dropElement = ev.target;
        if(ev.target.tagName=="IMG")
              dropElement = $(ev.target).closest('div')[0];
        if(dropElement.id.indexOf(shortData) !== -1){
            dropElement.appendChild(document.getElementById(data));
            document.getElementById(dropElement.id).remove();
        }
    }