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();
        }
    }

Answer 2

您需要传递参数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>

Answer 3

如果您的问题在此行中：

var dropElement = ev.target.id;

您可以考虑测试事件目标是否为img元素。在这种情况下，您可能会在这里找到最接近的祖先：

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>

ev.target.id不返回元素ID

3 个答案: