Javascript - перетаскивание букв в слове (переупорядочить)

Question

В настоящее время я работаю над браузером под названием «WordShuffle».
(слова есть немецкий на данный момент для целей тестирования, если вы хотите играть)

Мои успехи идут неплохо, но я решил изменить способ игры. На данный момент вам нужно отказаться от слова, набрав ваше предположение в текстовое поле.
Итак, теперь моя идея состоит в том, что люди могут переставить буквы одним словом, задрапировав их и опустив их в правильном порядке, вместо того, чтобы вводить их в текстовое поле.

Поскольку я плохо разбираюсь в javascript (и я думаю, что это должно работать лучше всего с javascript). Мне нужна помощь.
Однако я должен быть в состоянии получить от него ценность, чтобы сравнить его с правильным словом.
Кнопка отправки должна передать значение.

Я сделал концепт-арт, чтобы получить лучшее представление о нем:

Answer 1

Вот рабочий пример использования jquery-ui sortable е и Fisher-Yates shuffle algorithm:

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

Answer 2

Вы можете использовать jQuerys Сортируемый (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 и захватить внутренний divHTML каждого div (или через jQuery .html()). Затем сделайте одну строку и подтвердите это против секретного слова.