丢弃的元素不可见

我有一个被丢弃的图像，但是当元素被丢弃时，它在此处不可见。消息被显示，但图像在实际丢弃时不可见。
放下的元素在放下时不可见。我知道问题可能与appendchild，但我不明白为什么它不是工作。丢弃的元素不可见

这里是我的代码： CSS

.droptarget { 
     float: left; 
     width: 100px; 
     height: 35px; 
     margin: 15px; 
     padding: 10px; 
     border: 1px solid #aaaaaa; 
    } 
    .auto-style1 { 
     float: left; 
     width: 100px; 
     height: 35px; 
     margin: 15px; 
     padding: 10px; 
     border: 1px solid #aaaaaa; 
     text-align: right; 
    }

的Javascript

function startDrag(event) { 
     event.dataTransfer.setData("Text", event.target.id); 
     document.getElementById('demo').innerHTML = 'You started to Drag!!'; 
    } 

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

    function drop(event) { 
     event.preventDefault(); 
     var dropElement = event.dataTransfer.getData("Text"); 
     event.target.appendChild(document.getElementById('dropElement')); 
     document.getElementById('demo').innerHTML = 'Element Dropped!!'; 
    }

HTML

<div class="auto-style1"> 
       <img id="Drag1" src="../Downloads/Nobi.jpg" style="width:34px" height="45px" draggable="true" ondragstart="startDrag(event)" ondragover="allowDrop(event)" /> 

      </div> 
      <div class="droptarget" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"> 

      </div> 
      <p id="demo"> </p>

来源

2016-02-29 Prasad_Joshi

寻求调试帮助的问题（“为什么不是这个代码工作？”）必须包含所需的行为，特定的问题或错误以及在问题本身中重现问题所需的最短代码。没有明确问题陈述的问题对其他读者无益。请参阅：[如何创建最小，完整和可验证示例]（http://stackoverflow.com/help/mcve）。 –

哦..谢谢你..我会记住下一个问题 –

请解释你的问题，并尝试提出一个很好的问题。这对你有好处，因为你会得到一个好的和快速的答案。 –

尝试这个

这里是Demo

这里是相反的情况Demo

相反的情况下HTML

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 
     <img ondragstart="drag(event)" draggable="true" title="drag here" id="myImage" src="http://www.rw-designer.com/res/oism.png" /> 

</div> 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

尝试使用此代码

HTML

<h1>Drag and Drop</h1> 
<span draggable="true" id="div1" ondragstart="drag(event)"> 
     <img title="drag here" id="myImage" src="http://www.rw-designer.com/res/oism.png" /> 
</span> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

的Javascript

function drag(ev) 
{ 
//alert('dragged'); 
ev.dataTransfer.setData("dk",ev.target.id) 
} 
function drop(ev) 
{ 
ev.preventDefault(); 

    var data = ev.dataTransfer.getData("dk"); 
    ev.target.appendChild(document.getElementById(data)); 
} 

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

}

来源

2016-02-29 09:10:11

哦，这只是工程..但相反的情况下，这里不工作，我需要图像在原来的地方再次下降，来回需要不断。 –

@Prasad_Joshi我更新了答案。不要忘了给一个加投票:) –

感谢所有的投票。 Chilllll –

丢弃的元素不可见

回答

相关问题