Javascript 如何从背景图像顶部的1个div拖放？
请参阅上面的图像链接。我正在尝试将左侧的4个项目中的每一个拖放到右侧的画布中。这4个项目在一个分区中，画布在另一个分区中 在我拖动图标后，它似乎在背景图像后面。请参阅下图 我该怎么办 以下是我的文件代码：Javascript 如何从背景图像顶部的1个div拖放？,javascript,jquery,html,css,drag-and-drop,Javascript,Jquery,Html,Css,Drag And Drop,请参阅上面的图像链接。我正在尝试将左侧的4个项目中的每一个拖放到右侧的画布中。这4个项目在一个分区中，画布在另一个分区中 在我拖动图标后，它似乎在背景图像后面。请参阅下图 我该怎么办 以下是我的文件代码： <!doctype html> <html><head> <meta charset="utf-8"> <title>Daisy</title> <link rel="stylesheet" type="text
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>Daisy</title>
<link rel="stylesheet" type="text/css" href="_css/style1.css">
<!-- CALLING THE DRAG AND DROP FUNCTION -->
<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>
</head>
<body>
<div id="wrapper">
<div id="header"><input name="save" type="button" class="save" value="Save" width=60% height=60%>
<img src="_assets/title.png" width=60% height=60 %>
</div>
<!-- PLEASE DO SOME RESEARCH ON HOW TO BRING THE DRAG PICTURE(e.g pot,soil,opp etc etc FORWARD -->
<!-- ALSO, HOW TO BRING THE BACKGROUND PICTURE BACKWARDS -->
<div id="subNav"><img src="_assets/pot.png" id="pot1" alt="pot" width=100% height=100% ondragstart="drag(event)" draggable="true" class="icons">
<img src="_assets/soil.png" id="soil1" ondragstart="drag(event)" alt="soil" width=100% height=100% draggable="true" class="icons">
<img src="_assets/opp.png" id="can1" ondragstart="drag(event)" alt="wateringcan" width=100% height=100% draggable="true" class="icons">
<img src="_assets/Crazy_daisy.png" id="seed1" ondragstart="drag(event)" alt="seeds" width=100% height=100% draggable="true" class="icons">
</div>
<!-- DRAG AND DROP INTO DESIGNATRED AREA-->
<div id="content" ondrop="drop(event)" draggable="true" ondragover="allowDrop(event)"><img src="_assets/background.png" width=95% height=95% alt="bg">
<img src="_assets/instructions.png" alt="instructions" width=25% height=25% class="instructions">
</div>
</div>
</body>
</html>
雏菊
功能allowDrop（ev）
{
ev.preventDefault（）；
}
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））
}