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>