[英]drag and drop text exercise
我正在做一個練習,其中將文本id從div(包含單詞)中拖放,然后將其放入文本字段(這是3個)中。每個字段都有自己的文本放置..我已經拖放了文本,但是無法比較它們的特定字段..請幫助我..這是我的代碼:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#div3 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>
verbs
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
noun
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
adjetives
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="drag1" draggable="true" ondragstart="drag(event)">I play the guitar</div>
<div id="drag2" draggable="true" ondragstart="drag(event)">The piano is black</div>
</body>
</html>
您需要在此處進行一些更改。
您需要拖動單詞而不是句子
<div id="drag1">I
<span id="play" draggable="true" ondragstart="drag(event)"><b>play</b></span> the
<span id="guitar" draggable="true" ondragstart="drag(event)"><b>guitar</b></span>
</div>
應該有一些包含每種類型允許的單詞的列表
var nouns = ['guitar'];
var verbs = ['play'];
最后在掉落事件中應該有一個條件
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{
alert(data + ' is not a ' + ev.target.id +'. Try again');
}
}
這是一個句子的演示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.