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

我搜索并搜索了如何做到这一点，但无济于事。

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

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

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

我无法弄明白 – 任何帮助将不胜感激！

戴夫

Answer 1

的jsfiddle：

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

HTML：

 
 ⇅Item 1 
 
 ⇅Item 2 
 
 ⇅Item 3 
 
 ⇅Item 4 
 
 ⇅Item 5 
 
 ⇅Item 6 
 
 ⇅Item 7 
  

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 
 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 
 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 
 to move if (position >= 1 // * proceed only if && position <= itemsCount){ // 1<=position<=number of items li.effect('drop', function(){ // * hide 
 with 'drop' effect li.detach(); // * detach 
 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

这是通过改变数字来移动li项目的东西：

 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：

 
 
lijrfxgjh
 
ghhgfhj
 
lijrjh
 
gfreydjgj
 
rey
 
gfjgf
  

小提琴： http ： //jsfiddle.net/maniator/bDvK8/

这有点毛病，但这是一个开始