Sortable and string game
by devangkantharia
HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<ul id="sortable">
<li class="ui-state-default">my</li>
<li class="ui-state-default">Hello</li>
<li class="ui-state-default">is</li>
<li class="ui-state-default">name</li>
<li class="ui-state-default">devang</li>
</ul>
<div id="correctAnswer">Hello my name is devang</div>
CSS
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
/* width: 60%; */
overflow: hidden;
}
#sortable li {
margin: 30px 5px;
padding: 5px;
font-size: 1.2em;
height: 1.5em;
float: left;
min-width: 50px;
text-align: center;
}
html>body #sortable li {
height: 1.5em;
line-height: 1.2em;
}
.ui-state-highlight {
height: 1.5em;
line-height: 1.2em;
}
JavaScript
$(function () {
$("#sortable").sortable({
placeholder: "ui-state-highlight"
});
$("#sortable").disableSelection();
});
var sentence = document.getElementById("correctAnswer").innerHTML;
//console.log(sentence);
wordArray = sentence.split(' ');
console.log(wordArray);
//console.log(wordArray[2]);