拖放文字练习

Question

I am making an exercise in which text id drag from div(contain words) then drop them into text-fields (these are 3)..Each field has its own text to be placed .. I have already drag and drop the text but cant able to compare them for particular fields .. Please help me.. Here is my code : 我正在做一个练习，其中将文本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>

Answer 1

There are a couple of things you need to change here. 您需要在此处进行一些更改。

You need to drag words and not sentences 您需要拖动单词而不是句子

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

There should be some list containing the allowed words for each type 应该有一些包含每种类型允许的单词的列表

var nouns = ['guitar'];
var verbs = ['play'];

Finally there should be a condition during drop event 最后在掉落事件中应该有一个条件

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

}

Here is a demo for a single sentence 这是一个句子的演示

拖放文字练习

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-07-18 04:15:47

拖放文字练习

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-07-18 04:15:47

解决方案1
1 已采纳 2014-07-18 04:15:47