Question

我是tryig，使用Javascript和jQuery构建小型语言测验。基本上，人们会通过选择正确的答案来结束句子。

句子将显示缺少的部分，这些部分将被随机显示在下面。播放器会将适当的单词或短语拖到框中。

测验的某些部分效果很好，但是我有以下两个问题：

可以在一个框中添加两个答案。最好当有人添加第二个答案时，第一个答案返回到底部的div。
可以将一个答案放到另一个答案中，然后再链接在一起。之后，可以将它们拖在一起看起来很奇怪。

非常感谢您的帮助，这使我发疯。

        <style>
             .droptarget, base {
              border: 1px dotted #aaaaaa;
              display: inline-block;
              background-color: #eee;
              min-width: 10%; height: 20px;}

              span {display:inline-block;
              margin: 0 30px 0 10px;
              white-space:nowrap;}

             .base {min-width: 30%; height: 20px;}
        </style>


            Grass is <div class="droptarget" ondrop="drop(event)" 
            ondragover="allowDrop(event)"> <span class="answer">green</span> 
            </div><br>

            Sky is <div class="droptarget" ondrop="drop(event)" 
            ondragover="allowDrop(event)"> <span class="answer">blue</span> 
            </div><br> 

            Strawberries are <div class="droptarget" ondrop="drop(event)" 
            ondragover="allowDrop(event)"> <span class="answer">red</span> 
            </div><br>

            <p id="demo"></p>

            <div id="base" class="droptarget base" ondrop="drop(event)" 
            ondragover="allowDrop(event)"></div>

    <script>
        function dragStart(event) {
          event.dataTransfer.setData("Text", event.target.id);
        }

        function dragging(event) {
          document.getElementById("demo").innerHTML = "The p element is being dragged ";
        }

        function allowDrop(event) {
          event.preventDefault();
        }

        function drop(event) {
          event.preventDefault();
          var data = event.dataTransfer.getData("Text");

          if (event.target.className == 'droptarget base') {
            // alert('adding to base');
            $('.base').append(document.getElementById(data));
            document.getElementById("demo").innerHTML = "The p element was dropped";
          } else if (event.target.innerText == "") {
            //alert('adding to empty');
            event.target.append(document.getElementById(data));
            document.getElementById("demo").innerHTML = "The p element was dropped";
          } else {
            //alert('adding two together')
            event.target.append(document.getElementById(data));
            document.getElementById("demo").innerHTML = "The p element was dropped";
          }
        }

        $(function() {
          $('.answer').remove();
        });

        var array = $('.answer').map(function() {
          return $.trim($(this).text());
        }).get();

        var new_array = array;
        new_array.sort(function() {
          return 0.5 - Math.random()
        });

        $.each(new_array, function(index, value) {
          $(".base").append('<span  id="' + index + '"ondragstart="dragStart(event)" ondrag = "dragging(event)" onDrop = "false" ondrop = "false" draggable = "true" > ' + value + '</span>');
        });
</script>

我的JSFiddle：

https://jsfiddle.net/pawcioojf/3hzsdq76/

谢谢。

使用Javascript或jQuery拖放时如何交换元素

0 个答案: