Sortable list + ability to re-order each item by inputting rank #

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

Answer 2

here is something that moves the li items around by changing the numbers:

function setOrder() {
    $.each($('ul li input'), function(index, el) {
        el.value = (index + 1);
    });
}

setOrder();

$('ul li input').live('change', function() {
    var change = (parseInt(this.value) - 1);

    if(change > ($('ul li input').length - 1)){
        change = $('ul li input').length - 1; 
    }

    var index = $(this).index('ul li input');
    var move = $('ul li')[change];

    var arr = [];

    $.each($('ul li'), function(ind, el) {
        arr[ind] = $(this).clone();
    })
    arr[index] = move;
    $('input', move).val(index + 1);
    arr[change] = $(this).parent()[0];
    arr.sort();

    $('ul li').remove();
    var indexAt = 0;
    $.each(arr, function(index, el) {
        $('ul').append(el);
    });
    setOrder();
})
$('ul').sortable({
    stop: function(a, b) {
        var arr = [];
        var i = 0;
        $.each($('ul li'), function(ind, el) {
            arr[i] = $(this).clone();
            i++;
        })

        $('ul li').remove();
        $.each(arr, function(index, el) {
            $('ul').append(el);
        });
        setOrder()
    }
});

html:

<ul>
    <li><input/>lijrfxgjh</li>
    <li><input/>ghhgfhj</li>
    <li><input/>lijrjh</li>
    <li><input/>gfreydjgj</li>
    <li><input/>rey</li>
    <li><input/>gfjgf</li>
</ul>

fiddle: http://jsfiddle.net/maniator/bDvK8/

it is a bit glitchy, but it is a start