Sortables - zIndex not working on connected Sortables

[wjchristenson2]

Browser: IE 7 jQuery: 1.2.4a jQuery UI: 1.5b2 js: ui.sortable.js

When using 2 sortables on a page and they are connected, if you drag an item from Sortable A to Sortable B, the dragged item does not overlay items in Sortable B despite zIndex manipulation of the dragged item or helper item.

If you drag items from Sortable B to Sortable A it works fine.

/* zone styles */
.wf_zone { width: 200px; margin-right: 10px; min-height: 200px; }

/* widget styles */
.wf_widget { z-index: 1000;width: 100%; margin: 0px; margin-bottom: 10px; border-top: solid 1px #7AA5D6; border-left: solid 1px #C5D7EF; border-right: solid 1px #C5D7EF; border-bottom: solid 1px #C5D7EF; }
.wf_widget_header { margin: 0px; cursor: move; border-bottom: solid 1px #C5D7EF; border-top: none; border-left: none; border-right: none; background-color: #E5ECF9; color: #3366CC; }
.wf_widget_content { padding: 3px; margin: 0px; background-color: #FFFFFF; }
.wf_widget_dropcue { border: 2px dashed #AAAAAA; }

$(document).ready(function(){
	$("#zone_0").sortable({
	  items: 'div.wf_widget',
		handle: 'div.wf_widget_header',
		revert: false,
		scroll: true,
		placeholder: 'wf_widget_dropcue',
		connectWith: $('div.wf_zone'),
		opacity: 0.7,
		stop: function() { stopSort(); },
		dropOnEmpty: true,
		helper: function() { return $("#helper").clone().show(); },
		zIndex: 10000
	});

	$("#zone_1").sortable({
	  items: 'div.wf_widget',
		handle: 'div.wf_widget_header',
		revert: false,
		scroll: true,
		placeholder: 'wf_widget_dropcue',
		connectWith: $('div.wf_zone'),
		opacity: 0.7,
		stop: function() { stopSort(); },
		dropOnEmpty: true,
		helper: function() { return $("#helper").clone().show(); },
		zIndex: 10000
	});
});

    <div>
    
    <table>
        <tr><td>Zone 0:</td><td>Zone 1:</td></tr>
        <tr>
            <td style="vertical-align: top;">
                <%--zone 0--%>
                <div id="zone_0" class="wf_zone">
                    <%--widget 0--%>
                    <div id="widget_0" class="wf_widget">
                        <div class="wf_widget_header">widget 0</div>
                        <div class="wf_widget_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla laoreet euismod odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dictum tortor at sapien. Aliquam erat volutpat. Duis vel metus at magna sodales suscipit. Integer risus diam, dignissim vitae, ornare ut, vestibulum ut, augue. Nam sollicitudin congue lectus. Curabitur lacus. Integer est. Morbi vel sapien quis pede tempus dignissim. Etiam at libero eu sem posuere aliquam. Sed id nibh. Vestibulum consequat dui vel orci.</div>
                    </div>
                    
                    <%--widget 1--%>        
                    <div id="widget_1" class="wf_widget">
                        <div class="wf_widget_header">widget 1</div>
                        <div class="wf_widget_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla laoreet euismod odio.</div>
                    </div>
                </div>
            </td>
            <td style="vertical-align: top;">
                <%--zone 1--%>
                <div id="zone_1" class="wf_zone">
                    <%--widget 2--%>
                    <div id="widget_2" class="wf_widget">
                        <div class="wf_widget_header">widget 2</div>
                        <div class="wf_widget_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla laoreet euismod odio.</div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    </div>
    
    <div id="helper" style="border: solid 1px red;display: none;">helper</div>

[paul]

This is a known issue- it's related to IE's z-Index stacking, it uses the DOM position, too. The only solution is to use the appendTo option and append the helper to a higher node, like "body". You might modify some styles then, but it's the only feasible solution.

[(none)]

Milestone 1.2.4 deleted