丟棄的元素不可見

我有一個被丟棄的圖像，但是當元素被丟棄時，它在此處不可見。消息被顯示，但圖像在實際丟棄時不可見。
放下的元素在放下時不可見。我知道問題可能與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 –

丟棄的元素不可見

回答

相關問題