jQuery UI可排序：如何保持更改項的CSS值不變？

Question

我有一個以相反順序設置z-indexes的列表：

<ul>
    <li style="z-index: 3;">First item</li>
    <li style="z-index: 2;">Second item</li>
    <li style="z-index: 1;">Third item</li>
</ul>

使用jQuery UI可排序，我希望在對項目進行排序時元素的z索引不變時實現效果。 說，我要按以下順序對所有代表的項目進行排序：第二，第三，第一。 但是請保持z索引不變！

謝謝。

到目前為止，這是我用JS實現的（這是我的全部新知識）：

$('#widget-2').sortable({
        start: function(event, ui) {
            ui.item.data('originIndex', ui.item.css('z-index'));
        },
        change: function(event, ui) {
            ui.item.data('placeholderIndex', ui.placeholder.css('z-index'));

            var originIndex = ui.item.data('originIndex');
            var placeholderIndex = ui.item.data('placeholderIndex');

            ui.placeholder.css('z-index', originIndex);
            ui.item.css('z-index', placeholderIndex);
        }
    });

Answer 1

使用nth孩子http://codepen.io/anon/pen/pvEdMw

HTML

<ul>
<li >aaa</li>
<li>aaaasdsd</li>
<li>fgf</li>
</ul>

CSS

li{
 background-color:orange;
 }

li:nth-child(n-3){
color:red;
}

li:nth-child(n+2){
color:blue;
} 

li:nth-child(n+3){
color:green;
}

JQUERY

$('ul').sortable();

Answer 2

由於您已經在頁面上使用過JavaScript，所以我建議您使用此小jQuery插件計算並z-index准備就緒的文檔分配z-index ：

$.fn.reverseZIndex = function () {
    // get the children of the list.
    var $children = this.children(),
        length = $children.length;

    $children.each(function (index) {
        // assign z-index, high values to low.
        this.style.zIndex = length - index;
    });

    return this;
};

$(document).ready(function () {
    var $widget2 = $('#widget-2');

    // calculate reversed z-index.
    $widget2.reverseZIndex();

    // initialize sortable.
    $widget2.sortable(...);
});

然后，您可以在任何給定列表<ul>或<ol> （甚至是父級<div> ）上使用此插件，因此子級的z-index的順序相反。

在jQuery上對change進行排序，以更新z-index ：

$widget2.sortable({
    ...
    change: function () {
       ...
       $widget2.reverseZIndex();
    }
    ...
});