javascript - 可排序列表 + 通过输入排名 # 重新排序每个项目的能力

Question

我搜索了又搜索如何执行此操作，但无济于事。

基本上我有一个非常标准的 jQuery 可排序列表，使用夹具允许用户重新排列列表

我想为每个列表项添加一个输入框，自动填充该项目的#，允许用户输入任何数字(只要它是<==列表中项目的总数)<然后点击“Enter”或按下按钮重新排序列表。

请参阅 YouTube 播放列表工具或 Netflix 队列作为我所指的示例: http://img195.imageshack.us/img195/7715/youtubeplaylistrearrangc.png http://www.thedigeratilife.com/images/netflix-queue-big.jpg

我想不通 - 非常感谢任何帮助!

戴夫

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