Javascript - drag letters in word (Rearrange)

Question

I am currently working on a browsergame called " WordShuffle ".
(words are german at the moment for test purpose, if you want to play)

My progress is going on pretty well, but I decieded to change the way how you play the game. At the moment you have to quess the word by typing your guess into a textfield.
So my idea is now that people are able to rearrange the letters in a word by draging and dropping it in the right order instead of typing it into a textfield.

Since I am not good at javascript (and I think this should work best with javascript) I need help by that.
However, I must be able to get a value out of it to be able to compare it to the correct word.
A submit button should pass the value.

I made a concept art to get a better idea of it:

Answer 1

You could use jQuerys Sortable ( https://jqueryui.com/sortable/ ).

With that you could create a sortable word where each letter is actually in a separate div. For example like so:

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/

Then all you would need to do is iterate over the div's inside the word div and grab each div's innerHTML (or via jQuery .html()). Then make a single string of it and validate that against the secret word.

Answer 2

Here is a working example using jquery-ui sortable e and 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>