jQuery sortable - сортировка по значению поля ввода

Question

Отказ от ответственности - я не совсем уверен, что это возможно. Но в этом случае мне все равно хотелось бы, чтобы кто-то указывал на возможную альтернативу или какой-то хак.

Прошлая ситуация.

У меня есть рабочий список, который использует jQuery UI Sortable, чтобы пользователь мог перетаскивать элементы в списке.

The JQuery:

$(document).ready(function() { 
    $("#test-list").sortable({ 
     handle : '.big-handle', 
     update : function() { 
      var order = $('#test-list').sortable('serialize'); 
     $("#info").load("../sortable/process-sortable.php?"+order); 
     } 
    }); 
}); 

Частичные магазины Ajax новый заказ в базе данных, вам не нужно беспокоиться об этом.

HTML-:

<ul id="test-list"> 
<li id='listItem_1'><div class='main-item big-handle'><img src='../sortable/arrow.png' alt='move' width='16' height='16' class='handle' /><strong>Item 1</strong></div></li> 
<li id='listItem_2'><div class='main-item big-handle'><img src='../sortable/arrow.png' alt='move' width='16' height='16' class='handle' /><strong>Item 1</strong></div></li> 
<li id='listItem_3'><div class='main-item big-handle'><img src='../sortable/arrow.png' alt='move' width='16' height='16' class='handle' /><strong>Item 1</strong></div></li> 
</ul> 

Это все работает отлично. Теперь сложная часть. Мой клиент хочет ввести поле ввода рядом с каждым элементом списка, где пользователь может ввести номер, который должен onBlur переместить этот элемент списка в указанную позицию. Поэтому, если пользователь вводит «1» в поле рядом с пунктом списка нет. 3, то этот элемент должен перейти к первому месту в списке, точно так же, как если бы он был перетащен туда. Это можно сделать?

Не нужно, чтобы вы придумали полное решение для всего списка, предположим, что мне просто нужно поле, которое перенесет элемент нет. 3 вокруг.

Answer 1

Попробуйте

​$('input').on('blur', function(){ 
    var $el = $(this), 
    pos = $el.val(), 
    $parent = $el.closest('li'); 

    $parent.insertBefore($('li').eq(pos)); 

})​​​ 

Функциональная демо: http://jsfiddle.net/YyvjH/

эффект перехода эмулировать сопротивление может быть сделано в CSS3.

Answer 2

Метод eq (2) get является n-м согласующим элементом, который мы удаляем. В этом случае от позиция 3 (индекс 2), так как это тот, который вы попросили переместить. Мы удаляем его из DOM , а затем вставляем его в положение, указанное в поле ввода.

//do this on blur 
var index = parseInt($("input").val()) 
    , element = $("#test-list li").eq(2).remove(); 
$("#test-list li").eq(index - 1).before(element); // -1 because users like 1 based indices 

Answer 3

Как об этом: jsFiddle example.

$("#test-list").sortable({ 
    handle: '.big-handle', 
    update: function() { 
     var order = $('#test-list').sortable('serialize'); 
     $("#info").load("../sortable/process-sortable.php?" + order); 
    } 
}); 

$("#test-list input").blur(function() { 
    var pos = $(this).val() - 1; 
    if (pos >= 0 && pos <= $("#test-list li").length - 1) { 
     if ($(this).parents('li').index() > pos) { 
      //move up 
      $(this).parents('li').insertBefore($("#test-list li:eq(" + pos + ")")); 
     } 
     if ($(this).parents('li').index() < pos) { 
      //move down 
      $(this).parents('li').insertAfter($("#test-list li:eq(" + pos + ")")); 
     } 
     $("#test-list input").val(''); 
    } 
});​