Javascript 拖放文本练习_Javascript_Jquery_Html

Javascript 拖放文本练习

javascript jquery html

Javascript 拖放文本练习,javascript,jquery,html,Javascript,Jquery,Html,我正在做一个练习，在这个练习中，文本id从div（包含单词）拖动，然后将它们放到文本字段中（这是3个）…每个字段都有自己要放置的文本。。我已经拖放了文本，但无法比较特定字段的文本。。请帮帮我。。这是我的密码： <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px

我正在做一个练习，在这个练习中，文本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>


#div1{宽度：350px；高度：70px；填充：10px；边框：1px实心35; aaaaaa；}
#div2{宽度：350px；高度：70px；填充：10px；边框：1px实心35; aaaaaa；}
#div3{宽度：350px；高度：70px；填充：10px；边框：1px实心35; aaaaaa；}
功能allowDrop（ev）
{
ev.preventDefault（）；
}
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
动词


名词


形容词


我弹吉他
钢琴是黑色的

这里有几件事需要更改

您需要拖动单词而不是句子

<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>

最后，跌落事件期间应存在一个条件

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');
    }

}

下面是一个简单的句子

您应该提供JSFIDLE以获得更好的帮助。。我已经使用过jsbin，但找不到解决方案：（…请帮帮我，先生..你到底在找什么？比较是什么意思？先生，我想做这样的练习。我们如何将拖拽的单词与文本字段进行比较？是否适合文本字段？请帮帮我，先生..你真是太好了..嗨，先生，非常感谢，我正在工作，但我们如何将其用于多个单词？如何你会把多个词归类为名词、动词等吗。？

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');
    }

}