Opened 12 years ago

Closed 12 years ago

Last modified 11 years ago

#2777 closed bug (wontfix)

Sortables - zIndex not working on connected Sortables

Reported by: wjchristenson2 Owned by: paul
Priority: major Milestone:
Component: ui.core Version: 1.2.3
Keywords: Sortable Cc:
Blocked by: Blocking:

Description

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>

Change History (2)

comment:1 Changed 12 years ago by paul

Resolution: wontfix
Status: newclosed

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.

comment:2 Changed 11 years ago by (none)

Milestone: 1.2.4

Milestone 1.2.4 deleted

Note: See TracTickets for help on using tickets.