以正确的顺序排列单词，以拖放方式构成句子

Question

I've read the answers to this question and I came up with an exercise I wanted to test. 我已经阅读了该问题的答案，并且想出了一个我想测试的练习。

There is an educational quiz where you have to put the words in the right order. 有一个教育性测验，您必须按正确的顺序排列单词。

<html>
<head>
  <style type="text/css">
    body {background-color: black;}
    #div3 {margin-left: 0px;width:720px;height:200px;padding:50px;border:1px solid #aaaaaa;
      background-color: LightBlue;}
    span { margin: 20px; padding: 20px; background-color:#FFFF88; font-size: 50px;border: 0px solid;
      border-radius: 25px;box-shadow: 5px 5px 5px grey;}
    #quiz {margin-left: 0px;width:720px;height:200px;padding:40px;border:1px solid #aaaaaa;
      background-color: #FFFF88;}
    #quiz1 {border-radius: 0px;-webkit-touch-callout: none;-webkit-user-select: none;
      -khtml-user-select: none;-moz-user-select: moz-none;-ms-user-select: none;user-select: none;}
  </style>
</head>
<body>
   <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
     <span id="word1" draggable="true" ondragstart="drag(event)">the</span>
     <span id="word2" draggable="true" ondragstart="drag(event)">piano</span>
     <span id="word3" draggable="true" ondragstart="drag(event)">play</span>
     <span id="word4" draggable="true" ondragstart="drag(event)">I</span>  
   </div>

   <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>
</body>
</html>

code online: http://jsfiddle.net/gmouzakitis/C2f4P/5/ 在线代码： http : //jsfiddle.net/gmouzakitis/C2f4P/5/

Known Bugs - Drag & drop of a word before first word is not possible - When you drag and drop a word near or over another word they become like one draggable object. 已知错误-无法在第一个单词之前拖放单词-将单词拖放到另一个单词附近或上方时，它们变得像一个可拖动对象。 I dont want that. 我不想要那个。

Is there another way to do it, using other javascript framework like angular.js, jQuery, other? 还有其他方法可以使用angular.js，jQuery等其他JavaScript框架吗？

Answer 1

Note : The original question was "When you drag and drop a word near or over another word they become like one draggable" . 注意：最初的问题是“当您将一个单词拖放到另一个单词附近或上方时，它们变得像一个可拖动对象” 。 Since then the OP has changed the question so please see below (after the break) where I address the current question. 从那以后，OP改变了问题，所以请在休息后在下面看到我解决当前问题的位置。

Here is how you could do it. 这是您的方法。 I just needed to adjust your JavaScript slightly: http://jsbin.com/borexihi/1/edit?js,output 我只需要稍微调整一下JavaScript： http ： //jsbin.com/borexihi/1/edit？js，输出

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");

    var currentText = $(ev.target).text();
    $(ev.target).text($('#' + data).text() + ' ' + currentText);
    $('#' + data).remove();
}

Note: my solution does use jQuery 注意：我的解决方案确实使用jQuery

Answer for the current question : The question has changed so the following is my answer to the updated version, which asks "how to put the words given in the correct order" . 当前问题的答案 ：该问题已更改，因此以下是我对更新版本的回答，该问题询问“如何正确排列给出的单词” 。

Reordering items is a bit more tricky, which is why I would recommend using a library such as jQuery UI's sortable . 重新排序项目比较棘手，这就是为什么我建议使用诸如jQuery UI的sortable之类的库的原因。

I've created a JSBin for you that incorporates your code with the library: http://jsbin.com/giqoxitu/1/edit?html,css,js,output . 我为您创建了一个JSBin，它将您的代码与以下库合并： http ://jsbin.com/giqoxitu/1/edit?html,css,js, output 。 Here is the code: 这是代码：

HTML: HTML：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<ul id="sortable" class="div3">
<li id="word1" class="ui-state-default">The</li>
<li id="word2" class="ui-state-default">piano</li>
<li id="word3" class="ui-state-default">play</li>
<li id="word4" class="ui-state-default">I</li>  
</ul>
</body>
</html>

CSS: CSS：

body {background-color: black;}

#sortable { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
}

#sortable li { 
  margin: 3px 3px 3px 0; 
  padding: 1px; 
  float: left; 
  width: 145px; 
  height: 90px; 
  font-size: 4em; 
  text-align: center; 
}

.div3 {
  margin-left: 0px;
  height:200px;
  padding:50px;
  border:1px solid #aaaaaa;
  background-color: LightBlue;
}

li { 
  margin: 20px; 
  padding: 20px; 
  border: 0px solid;
  border-radius: 25px;
  box-shadow: 5px 5px 5px grey;
}

JavaScript: JavaScript的：

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });

以正确的顺序排列单词，以拖放方式构成句子

问题描述

1 个解决方案

解决方案1
1 2014-07-27 15:43:13

以正确的顺序排列单词，以拖放方式构成句子

问题描述

1 个解决方案

解决方案1 1 2014-07-27 15:43:13

解决方案1
1 2014-07-27 15:43:13