Sortable test

by devangkantharia

HTML

<link rel="stylesheet" href="http://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>

<p><b>Results:</b> <span id="results">aaa</span></p>
<button id="aaa">Submit</button>

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({
        update: function () {
  			//showValues();
            //alert($("#sortable li").text());
      var fields = $("#sortable li").serializeArray();
            jQuery.each( fields, function( i, field ) {
              $( "#results" ).append( field.value + " " );
            });
        }
    }).disableSelection();
});

function showValues() {
    
          //alert("2");
          alert(fields);
     // $("#results").empty();
      jQuery.each(fields, function (i, field) {
          alert("1");
          $("#results").append(field.id + " ");
      });
  }


  

/*
    $(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]);
*/