我正在做一个练习，我试图从div拖动文本并将其放入相关的字段中。我已经开发了练习但问题是当文本被拖入相应的字段时，它从div中永久删除.. div上的单词不应该消失，也许它应该变成浅灰色或其他颜色，以便知道你已经拖动了。否则句子再也没有意义了。另一个问题是拖动的单词之间应该有一个空格，我的意思是右边的方框，你会看到一旦你拖动单词，他们就会都在一起，中间没有空格..有可能吗？如果可以的话，请帮助我..你会这么好......谢谢 这是我的代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<style>
#bod{
display: inline-block;
}
#drag1{
margin-left: 0px;
background: #D1EEEE;
border: 2px solid #AAAAAA;
/*padding: 50px 50px 50px 50px; */
width: 910px;
height: 350px;
}
#field{
height:2px;
width:2px;
margin:auto;
padding:70px 20px 20px 1000px;
}
#verb {
width:150px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
#noun {
width:150px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
#adjective {
width:150px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<script>
var nouns = ['I','am'];
var verbs = ['computer'];
var adjectives=['student']
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");
if(ev.target.id =='verb' && verbs.indexOf(data) != -1){
ev.target.appendChild(document.getElementById(data));
}
else if(ev.target.id =='noun' && nouns.indexOf(data) != -1){
ev.target.appendChild(document.getElementById(data));
}
else if(ev.target.id =='adjective' && adjectives.indexOf(data) != -1){
ev.target.appendChild(document.getElementById(data));
}
else{
alert('Not Found');
}
}
</script>
<div id="bod">
<div id="field">
<div id="verb" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<br>
<div id="noun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="adjective" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<br>
<div id="drag1"> <span id="I" draggable="true" ondragstart="drag(event)">
<b>I</b></span> <span id="am" draggable="true" ondragstart="drag(event)">
<b>am</b></span> <span id="computer" draggable="true"
ondragstart="drag(event)"><b>computer</b></span> <span id="student"
draggable="true" ondragstart="drag(event)"><b>student</b></span><br/>
</div>
</div>
</html>