CODEWITHSUNDEEP
javascriptjqueryjquery-ui-sortable
sveti petar
sveti petar

Reputation: 3797

jQuery sortable - sort based on value of input field

Disclaimer - I'm not entirely sure this is even possible. But in that case, I'd still like someone to point out a possible alternative or a hack of some sort.

Here's the situation.

I have a working list which uses jQuery UI Sortable so the user can drag and drop the items on the list.

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

The Ajax part stores the new order in the database, you don't need to worry about that.

The 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>

That all works fine. Now, the tricky part. My client wants an input field next to each list item where the user can enter a number, which should onBlur move that list item to the specified position. So if the user enters "1" into the field next to list item no. 3, then that item should move to the first spot on the list, just as if it was dragged there. Can this be done?

No need for you to come up with a full solution for the whole list, let's say that I just need a field which would move item no. 3 around.

Upvotes: 5

Views: 3522

Answers (3)

j08691
j08691

Reputation: 207901

How about this: 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('');
    }
});​

Upvotes: 1

coderzach
coderzach

Reputation: 388

The eq(2) method get's the n-th matching element, which we remove. In this case from position 3 (index 2), since that's the one you asked to move. We remove it from the DOM and then insert it at the position specified in the input box.

//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

Upvotes: 0

Martin Borthiry
Martin Borthiry

Reputation: 5326

Try this

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

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

})​​​

The functional demo: http://jsfiddle.net/YyvjH/

The transition effect to emulate the drag could be done in CSS3.

Upvotes: 0

Related Questions