jQuery UI sortable: how to leave css values of changed items untouched?

Question

I have a list with z-indexes set in reverse order:

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

With jQuery UI sortable I want to achieve the effect when z-indexes of my elements don't change when I sort the items. Say, I want to sort all represented items in this order: Second, Third, First. But leave z-indexes untouched!

Thanks.

This is what I've achieved with JS so far (I'm all new in this):

$('#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);
        }
    });

Related (sort of) question: http://stackoverflow.com/questions/2345132/reversing-z-index-based-from-page-render-order — MiKo, Dec 26 '14 at 11:56

Akshay · Answer 1 · 2014-12-26T15:13:52.210

0

Usenth child 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();

edited Dec 26 '14 at 15:13

answered Dec 26 '14 at 11:05

Akshay

14,138
5
46
70

That's a great solution, thank you. But there's one problem, I don't know how many elements my list would has, there can be 10 or 100. – Dec 26 '14 at 11:18
@vadimyer if you are using two colors then you can set it to `li:nth-child(odd)` or `even` – Akshay Dec 26 '14 at 11:20
Unfortunately I need to use z-indexes. – Dec 26 '14 at 11:29
@vadimyer you can use `z-index` – Akshay Dec 26 '14 at 11:30
I have box-shadows and need them to be on top of each next element. But I'd love to vote up for your solution, though. – Dec 26 '14 at 11:38
@vadimyer i am not able to do the same thing with `z-index` http://codepen.io/anon/pen/pvEdMw i am going to ask about this here – Akshay Dec 26 '14 at 13:48
This is a solution for now, thank you. But I might need 100, or even 500 elements, the idea to hardcode those nth-childs in CSS doesn't seem good. I'm still trying to understand how could it be done with JS. – Dec 26 '14 at 14:37

score 0 · Accepted Answer · answered Dec 26 '14 at 21:59

Since you already use JavaScript on the page, I would suggest you calculate and assign z-index on document ready, using this tiny jQuery plugin:

$.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(...);
});

Then you can use this plugin on any given list, <ul> or <ol> (or even a parent <div>), so the children will have z-index in the reversed order.

Do the same in jQuery sortable on change, to update z-index:

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

Thanks, this works flawlessly. I just had to change change method to stop in sortable to get it working. — , Dec 27 '14 at 01:20

jQuery UI sortable: how to leave css values of changed items untouched?

2 Answers2