ev.target.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

Если ваша проблема в этой строке:

var dropElement = ev.target.id;

, вы можете проверить, является ли цель события элементом img.В этом случае вы можете получить ближайшего предка drophere:

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.tagName == 'IMG') ? ev.target.closest('.drophere') : ev.target;

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

<div class="drophere" id="drophere_215" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="https://dummyimage.com/100x100/000/fff&text=1" />
</div>

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

Answer 2

Убедитесь, что выброшенная цель - родитель <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();
        }
    }

Answer 3

Вам необходимо передать параметр this нет event доступ id ev.id
e.target находится на примере слушателя:

document.addEventListener("click",function(e){
  console.log(e.target)
})

пример:

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

Это точка перетаскивания:

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

javascript:

<script type="text/javascript">

function allowDrop(ev) {
  ev.preventDefault();
}

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var shortData = data.replace('draghere_','');
  var dropElement = ev.id;

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

</script>