Question

I’ve searched and searched about how to do this, but to no avail.

Basically I have a pretty standard jQuery sortable list, using a gripper to allow users to rearrange the list

What I would like to add is an input box to each list item, autofilled with that item’s #, that allows users to enter any number (so long as it is <== the total # of items in the list)< and then hit “Enter” or press a button to re-order the list.

Please see the YouTube Playlist tool or Netflix Queue as an example of what I am referring to:
http://img195.imageshack.us/img195/7715/youtubeplaylistrearrangc.png
http://www.thedigeratilife.com/images/netflix-queue-big.jpg

I cannot figure this out – Any assistance would be greatly appreciated!

Dave

Answer 1

jsfiddle:

http://jsfiddle.net/pMcmL/6/

HTML:

<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:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.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');                  // * sortable <ul>
itemsCount = $('#sortable li').length;     // * total number of items
function updateIndexes() {                 // * function to update
    $('#sortable li input').each(          //   items numbering
      function(i) {
        $(this).val(i + 1);
    });
}
updateIndexes();                           // * start by update items numbering
sort_ul.sortable({handle: 'span',          // * apply 'sortable' to <ul>
                  stop: function(event, ui){
                          updateIndexes(); // * when sorting is completed,
                        }                  //   update items numbering
});
$('#sortable li input').keyup(             // * watch for keyup on inputs
  function(event) {
    if (event.keyCode == '13') {           // * react only to ENTER press
        event.preventDefault();            // * stop the event here
        position = parseInt($(this).val());// * get user 'new position'
        li = $(this).parent();             // * store current <li> to move
        if (position >= 1                  // * proceed only if
            && position <= itemsCount){    //   1<=position<=number of items
          li.effect('drop', function(){    // * hide <li> with 'drop' effect
            li.detach();                   // * detach <li> from DOM
            if (position == itemsCount)
              sort_ul.append(li);          // * if pos=last: append
            else                           //   else: insert before position-1
              li.insertBefore($('#sortable li:eq('+(position - 1)+')'));
            updateIndexes();               // * update items numbering
            li.effect('slide');            // * apply 'slide' effect when in
          });                              //   new position
        }else{ li.effect('highlight'); }   // * if invalid position: highlight
}}});