jquery - 使用 Jquery 移动重新排序列表项

Question

我有点难过。我有一个包含 5 个项目的无序列表。第三个项目的样式看起来比其他项目大。

单击一个项目时，我希望该项目动画到中间位置（如旋转木马），并让剩余的列表项目相应地向上或向下移动。

<ul>
   <li>one</li>
   <li>two</li>
   <li class="bigOne">three</li>
   <li>four</li>
   <li>five</li>
</ul>

因此，如果我单击第五项 - 列表将变为：

<ul>
   <li>three</li>
   <li>four</li>
   <li class="bigOne">five</li>
   <li>one</li>
   <li>two</li>
</ul>

如果单击第二项，列表将变为：

<ul>
   <li>five</li>
   <li>one</li>
   <li class="bigOne">two</li>
   <li>three</li>
   <li>four</li>
</ul>

我已经能够将项目移动到第三个位置 - 但是，我无法弄清楚如何将所有其他项目向上移动并将它们设置为动画位置。周末我花了几个小时处理各种代码 - 但无法让它工作。

这是 JS fiddle 的链接：

http://jsfiddle.net/cadud/

正如你所看到的 - 我在开始 1、1 时得到了一个奇怪的聚束，并且没有类被添加到中间（3rd）元素。

Answer 1

这是 jquery 插件Roundabout 演示

源代码在github上可用

Answer 2

我已经用动画实现了列表项的重新排列。要求是我有五个要素：

1   2   3   4   5   

并重新排列顺序，当单击第一个元素时，它会将位置放在中心，如下所示：

5   4   1   2  3

你可以检查我的小提琴：Jsfiddle

$('.horizontal li').on('click', function (e) {
    $(this).addClass('active').siblings().removeClass('active');
    var tparent = $(this).parent();
    var childs = tparent.children().length;
    var eachWidth = this.clientWidth + 10;
    var middle = eachWidth * (parseInt(childs / 2));
    var rowChild = $(this).parent().children('li');
    var currentIndex = rowChild.index($(this));

    rowChild.each(function (li) {
        if ($(this).attr("POS")) {
            cp = $(this).attr("POS");
        } else {
            $(this).attr("POS", li);
        }
    });

    function animateEach() {
        rowChild.each(function (li) {
            var _minePos = $(this).position().left;
            var cp = $(this).attr("POS");
            var _newPos = cp * eachWidth;

            $(this).animate({
                left: (cp - li) * eachWidth,
            }, 40, function () {
                // checkPOS();
            });
        });
        setTimeout(checkPOS(true), 40);
    }

    var currentelement = $(this);
    var currentIIN = $(this).attr("POS");

    function checkPOS(ee) {
        if (currentIIN != 2) {
            rowChild.each(function (li) {
                var eachPOS = $(this).attr("POS");
                if (eachPOS >= 4) {
                    $(this).attr("POS", 0);
                } else {
                    $(this).attr("POS", parseInt(eachPOS) + 1);
                }
            });
            currentIIN = currentelement.attr("POS");
            animateEach();
        } else {
            if (ee) currentelement.addClass('active');

        }
    }

    checkPOS();

p {
    margin: 1px;
    cursor: pointer;
}
li {
    cursor: pointer;
}
ul.horizontal {
    clear: both;
    display: block;
    height: 40px;
}
ul.horizontal li {
    float: left;
    /*background: #ccc;*/
    display: block;
    margin-left: 10px;
    padding: 5px;
    position: relative;
}
.ul.horizontal .li.a {
    border:2px solid #fb7d1e;
    font-size: 50px;
}
.horizontal li.active {
    /*background:silver;*/
    font-weight:bold;
    color:blueviolet;
    font-size: 20px;
    /*height: 150px;*/
    /*width:150px;*/
    webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    /*border:1px solid ;*/
    /*border-radius: 1em;*/
    -webkit-box-shadow: 0 58px 36px -56px #7ac9ff;
    -moz-box-shadow: 0 58px 36px -56px #7ac9ff;
    box-shadow: 0 58px 36px -56px #7ac9ff;
}
/*background: #ccc;*/
 display: block;
 margin-left: 10px;
 padding: 5px;
 position: relative;

}
.ul.horizontal .li.a {
    border:2px solid #fb7d1e;
    font-size: 50px;
}
.horizontal li.active {
    /*background:silver;*/
    font-weight:bold;
    color:blueviolet;
    font-size: 20px;
    /*height: 150px;*/
    /*width:150px;*/
    webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    /*border:1px solid ;*/
    /*border-radius: 1em;*/
    -webkit-box-shadow: 0 58px 36px -56px #7ac9ff;
    -moz-box-shadow: 0 58px 36px -56px #7ac9ff;
    box-shadow: 0 58px 36px -56px #7ac9ff;
}

检查我的Jsfiddle