可排序列表+通过输入排名重新排序每个项目的能力＃ [英] Sortable list + ability to re-order each item by inputting rank #

问题描述

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

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

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

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

我想添加的是每个列表项的输入框，自动填充该项的＃，允许用户输入任意数字（所以只要它是< ==列表中的项目总数）<然后按Enter或按一个按钮重新排序列表。

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.

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

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

推荐答案

jsfiddle：

< a href =http://jsfiddle.net/pMcmL/6/> http://jsfiddle.net/pMcmL/6/

HTML ：

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

+

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：

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

这篇关于可排序列表+通过输入排名重新排序每个项目的能力＃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！