Изменить порядок изображений с помощью jquery

Question

У меня есть 4 маленьких миниатюрных изображения, расположенных рядом, которые при нажатии на каждую изменяют небольшой div / панель под ними, чтобы показать различный текст.

Когда изображение нажимается, я хочу, чтобы они переупорядочивались по одномуэто было щелкнуто, чтобы пойти далеко налево.Поэтому, если щелкнуть 2 ниже:

1 2 3 4

Это должно стать

2 1 3 4

В идеале скольжение, я нашел много JqueryПлагин пользовательского интерфейса для отображения скользящих карасолей и т. Д., Но нет ни одного для изменения порядка изображений, кто-нибудь знает?

Спасибо

Answer 1

Вот, пожалуйста.: D

http://jsfiddle.net/rNzf7/

$(document).ready(function() {
    var x = 100;
    $('img').each(function() {
        $(this).css("left",x+"px");
        $(this).css("background-color", "rgb(0,90,"+x+")");
        x += 55;
    });
});

$('img').click(function(e) {
    
 
    $(e.target).animate({
        left: "100"
    });
    
    $(e.target).siblings().each(function (){
        if ( $(this).position().left < $(e.target).position().left ) {
            $(this).animate({ left: "+=55" });
        }
    });
});

Answer 2

Почему бы не переупорядочить их с помощью перетаскивания с помощью Jquery UI Sortable> http://jqueryui.com/demos/sortable/#display-grid

Answer 3

Это то, что вы ищете ( без скольжения, как заметил Нил ).

$('img-selector').click(function(){
  $(this).parent().prepend(this);
});

красочное демо на http://jsfiddle.net/gaby/Lu5Q8/