我目前正在开发一款名为“词洗牌 http://wordshuffle.bplaced.net/".
（目前单词是德语，用于测试目的，如果你想玩的话）
我的进步进展顺利，但我决定改变你玩游戏的方式。目前，您必须通过在文本字段中输入您的猜测来猜测该单词。
所以我现在的想法是，人们可以通过按正确的顺序拖放单词来重新排列单词中的字母，而不是将其输入到文本字段中。
由于我不擅长 javascript（我认为这应该最适合 javascript），因此我需要帮助。
但是，我必须能够从中获取值，以便能够将其与正确的单词进行比较。
提交按钮应该传递该值。
I made a concept art to get a better idea of it:
这是一个使用的工作示例jquery-ui 可排序 https://jqueryui.com/sortable/#display-grid e and Fisher-Yates 洗牌算法 https://stackoverflow.com/a/25984542/5483521 :
$(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
}#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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<ul id="wordblock">
</ul>