Question

I want a list

Item 1 up
Item 2 up

that will be shortable and when you drag item 2 to make the green div come above the red div. meaning is z-index will be higher!

is my link to see it working so far..
http://jsfiddle.net/2vgRY/

Thanks guys in advance!

EDIT:

just one last thing! when i place a 3rd item and place it above the 2nd i want the first one to still be on the top then the 3rd, then the 2nd.. http://jsfiddle.net/2vgRY/3/

its like a sorting thing , you draf item 3 up then div 3 comes up, you drag item 2 bellow item 1 then div 1 is first then div 2 bellow it then div 3 last ..

Answer 1

If I’ve understood your question correctly, you can use jQuery UI sortable() start event:

See this working Fiddle Example!

JQUERY

$(function() {
    $( "#sortable" ).sortable({
        start: function(event, ui) {
            // clear z-index
            $('span[class^="target_"]').css({
                "z-index" : '0'
            });

            // bring up the target
            var item = ui.item.attr('class').split(' ')[0];
            $('.' + item.replace("item", "target")).css({
                "z-index" : 10000
            });
        },
    });

    $( "#sortable" ).disableSelection();
});

HTML

<ul id="sortable">
  <li class="item_1 ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 up
  </li>
  <li class="item_2 ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2 up
  </li>
</ul>
<span class="target_1" style="background:red;padding:30px; position:absolute; float:left;">1</span>
<span class="target_2" style="background:green; padding:30px; margin-left:10px; position:absolute; float:left;">2</span>

Note that I’ve added the class item_x and the class target_x to allow the elements identification.