拖動一個圖像的副本不會在另一個上面拖動

Question

我使用標準的javascript代碼進行拖放並將其修改爲在拖放區域拖動圖像的副本。我無法弄清楚，因爲我什麼也沒有關於JavaScript，是爲了替換/交換掉落的圖像時，我拖動另一個頂部它。請幫助!!我真的很感激它！我使用了下面的代碼，我更喜歡當前代碼是否有解決方法，如果沒有，有沒有簡單的方法來解決這個問題？非常感謝！

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

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

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

function drop(ev) { 
var data = ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data).cloneNode(true)); 

ev.preventDefault(); 
} 

Answer 1

在這種Fiddle
當你拖放區域上落區拖動圖像（在DX藍格）如果有這個圖像消失的新的拖累圖像顯示的圖像
您所需要的jQuery代碼是

<script> 
    $(document).ready(function(){ 
     $('.dr').on("dragstart", function (event) { 
       var dt = event.originalEvent.dataTransfer; 
       dt.setData('Text', $(this).attr('id')); 
      }); 

     $('#dropArea').on("dragenter dragover drop", function (event) { 
      event.preventDefault(); 
      if (event.type === 'drop') { 
       $(this).find('.dr').remove() 
       var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id')); 
       de=$('#'+data).clone(); 
       de.css({'position':'absolute','top':0+'px','left':0+'px'}).appendTo($(this)); 
      }; 
     }); 
    }); 
</script> 

爲此結果我使用拖放API a html5