HTML5和JS將多個圖像拖放到特定位置

Question

我嘗試擁有2個可拖動的圖像和2個目標位置，但我希望image1只能放在位置1，而image2只能夠被放置在位置2中，該代碼允許將圖像放置在任一位置。

（我已經離開了文檔類型，頭部，身體等標籤讀取簡單）

CSS

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
#div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 

HTML

<script> 
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"); 
ev.target.appendChild(document.getElementById(data)); 
} 
</script> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<img id="drag1" src="images/excercises/image1.jpg" draggable="true" 
ondragstart="drag(event)" width="336" height="69"> 


<div id="div2" ondrop="drop(event)" 
ondragover="allowDrop(event)"></div> 
<img id="drag1" src="images/excercises/image2.jpg" draggable="true" 
ondragstart="drag(event)" width="336" height="69"> 

Answer 1

起初，解決您的第二張圖片的ID。 （這是一樣的第一張圖片）

然後，給每個你的DIV添加屬性，其內容是圖像的ID，你想在

data-drop="drag1" 

下降併成立了一個小下降函數內部條件

function drop(ev) 
{ 
    ev.preventDefault(); 
    var data=ev.dataTransfer.getData("Text"); 

    //allow drop only if an ID attribute of the image is the same as specified in a DIV attribute 
    if(ev.target.getAttribute('data-drop') == data) 
     ev.target.appendChild(document.getElementById(data)); 

} 

EDIT

http://codepen.io/anon/pen/wgCkB