Javascript-在單詞中拖動字母（重新排列）

Question

我目前正在開發一個名為“ WordShuffle ”的瀏覽器游戲。
（如果您想玩，此刻德語是測試用的單詞）

我的進步很順利，但是我決定改變您玩游戲的方式。 目前，您必須通過在文本字段中輸入猜測來查詢單詞。
因此，我現在的想法是，人們可以通過按正確的順序拖放單詞來重新排列單詞中的字母，而不用將其鍵入文本字段中。

由於我不擅長javascript（我認為這應該最適合javascript），因此我需要幫助。
但是，我必須能夠從中獲得一個價值，以便能夠將其與正確的單詞進行比較。
提交按鈕應該傳遞值。

我做了一個概念圖，以更好地了解它：

Answer 1

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

這樣，您可以創建一個可排序的單詞，其中每個字母實際上都位於一個單獨的div中。 例如這樣：

HTML：

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

JS：

$(function () {
    $(".word").sortable();
});

http://jsfiddle.net/dbp2988e/

然后，您需要做的就是遍歷div單詞中的div並獲取每個div的innerHTML（或通過jQuery .html（））。 然后將其制成單個字符串，並針對秘密單詞進行驗證。

Answer 2

這是一個使用jquery-ui可排序 e和Fisher-Yates隨機算法的工作示例：

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