A great solution I got from http://stackoverflow.com/questions/5...inputting-rank
doesn't work locally when running the HTML, CSS, and JQuery files.....

Know why?

Here's the working solution - http://jsfiddle.net/pMcmL/6/.

My adaptation....

HTML:

Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
     <title>Promorpheus PROTOTYPE Experiments | Users</title>
 
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script type="text/javascript" src="reorder.js" ></script> \\ local JavaScript

	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="reorder-original.css" media="screen" />

  </head>

  <body>
    <ul id="sortable">
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 1</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 2</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 3</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 4</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 5</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 6</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 7</li>
    </ul>
  </body>

</html>
Then, the Solution specifies:

CSS:

http://ajax.googleapis.com/ajax/libs.../jquery-ui.css

+

Code:
li {
    margin: 1px;
    width: 130px;
    padding:2px;
    vertical-align:middle;
}

li span {
  color: gray;
  font-size: 1.1em;
  margin-right: 5px;
  margin-left: 5px;
  cursor: pointer;
  height:100%;
}

input[type="text"] {
    width: 32px;
    margin-right: 5px;
    border: 1px solid lightgray;
    color: blue;
    text-align: center;
}
...and JavaScript:

Code:
sort_ul = $('#sortable');
itemsCount = $('#sortable li').length;

function updateIndexes(){
    $('li input').each(function(i){
              $(this).val(i+1);
          });
}

updateIndexes();
         
sort_ul.sortable({handle:'span',
                  stop:function(event,ui){ updateIndexes(); }
});

$('li input').keyup(function(event) {
  if(event.keyCode == '13'){      
    event.preventDefault();
      
    order = parseInt($(this).val());
      
    li = $(this).parent();
    if(order>=1 && order <= itemsCount){      
        
        li.effect('drop', function(){
            li.detach();
                
            if(order == itemsCount)
                sort_ul.append(li);
            else
                li.insertBefore($('#sortable li:eq('+(order-1)+')'));
            
            updateIndexes();
            li.effect('slide');
        });
    }else{
        li.effect('highlight');
    }
  }    
});
Any thoughts?

Thanks,
Barry