Javascript - 拖动单词中的字母（重新排列）

Question

我目前正在开发名为＆＃34; WordShuffle＆＃34;的浏览器游戏 （如果你想玩的话，目前的单词是德语用于测试目的）

我的进步很顺利，但我决定改变你玩游戏的方式。目前你必须通过在文本字段中输入你的猜测来解决这个问题 所以现在我的想法是，人们可以通过按正确顺序拖放字母而不是将其输入文本字段来重新排列单词中的字母。

由于我不擅长javascript（我认为这应该最适合javascript）我需要帮助。
但是，我必须能够从中获取一个值才能将它与正确的单词进行比较 提交按钮应该传递值。

我制作了一个概念艺术来更好地了解它：

Answer 1

您可以使用jQuerys Sortable（https://jqueryui.com/sortable/）。

通过它你可以创建一个可排序的单词，其中每个字母实际上都在一个单独的div中。例如：

HTML：

inputValue

JS：

<div class="word">
    <div>E</div>
    <div>X</div>
    <div>A</div>
    <div>M</div>
    <div>P</div>
    <div>L</div>
    <div>E</div>
</div>

http://jsfiddle.net/dbp2988e/

然后你需要做的就是迭代div里面的div并抓住每个div的innerHTML（或者通过jQuery .html（））。然后制作一个单独的字符串，并根据秘密字验证。

Answer 2

以下是使用jquery-ui sortable e和Fisher-Yates shuffle algorithm：

的工作示例

＆＃13;

＆＃13;

ord(chr(ord("\xE9") / 64) | "\xC0");

＆＃13;

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


  const word = 'example';
  let d_word = word.split('');
  shuffle(d_word);

  const lis = [];
  for (let i = 0; i < d_word.length; i++) {
    lis.push('<li class="ui-state-default">' + d_word[i] + '</li>')
  }

  $('#wordblock').html(lis.join(''));

  $('#wordblock').mouseup(function() {
    setTimeout(() => {
      let r_word = '';
      $('#wordblock>li').each(function(e) {
        r_word += $(this).text();
      });
      if (r_word == word) {
        console.log("YOU FOUND IT! : " + r_word);
      } else {
        console.log("Keep trying!");
      }
    }, 0);
  });

});

function shuffle(a, b, c, d) {
  c = a.length;
  while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d
}

＆＃13;

#wordblock {
  list-style-type: none;
  margin: 0;
  padding: 0;
  
  /* prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}  


#wordblock li {
  margin: 3px 3px 3px 0;
  padding: 1px;
  width: 40px;
  float: left;
  font-size: 3em;
  text-align: center;
  cursor: pointer;
  font-family: arial;
  background-color: rgb(0,100,155);
  color: white;
}

＆＃13;

＆＃13;

＆＃13;