Question

我有4个并排放置的小缩略图，每次点击时都会更改下方的小div /面板以显示不同的文字。

单击图像时，我希望它们按照单击的图像重新排序到最左侧。所以，如果点击下面的2：

1 2 3 4

它应该成为

2 1 3 4

理想情况下滑动，我发现很多Jquery UI插件显示滑动carasols等但没有重新排序图像，任何知道任何？

由于

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＆gt;拖放来重新排序它们？ http://jqueryui.com/demos/sortable/#display-grid

Answer 3

这就是你要找的东西（没有滑动，因为 neal ）。

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

http://jsfiddle.net/gaby/Lu5Q8/

的彩色演示

使用jquery重新排序图像

3 个答案: