我尝试有 2 个可拖动图像和 2 个目标位置,但我希望 image1 只能放置在 location1 中,而 image2 只能放置在 location2 中,此代码允许任一图像被丢弃在任一位置。
(为了方便阅读,我省略了文档类型、头部、正文标签等)
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">
最佳答案
首先,修复第二张图片的 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));
}
编辑
关于javascript - HTML5和JS将多个图像拖放到特定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20359629/