gpt4 book ai didi

javascript - 拖放文本练习

转载 作者:行者123 更新时间:2023-11-28 01:08:03 25 4
gpt4 key购买 nike

我正在做一个练习,其中文本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');
}

}

这是一个demo对于单个句子

关于javascript - 拖放文本练习,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24816784/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com