html拖动图片到指定位置,HTML5和JS将多个图像拖放到特定位置

我尝试拥有2个可拖动的图像和2个目标位置，但我希望image1只能放在位置1，而image2只能够被放置在位置2中，该代码允许将图像放置在任一位置。HTML5和JS将多个图像拖放到特定位置

(我已经离开了文档类型，头部，身体等标签读取简单)

CSS

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

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

HTML

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

}

οndragstart="drag(event)" width="336" height="69">

οndragοver="allowDrop(event)">

οndragstart="drag(event)" width="336" height="69">