JSFiddle - React, Tailwind, and code Playground

by mustafa yılmaz

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<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>

CSS

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 lightgay;
    color: blue;
    text-align: center;
}

JavaScript

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');
    }
  }    
});