Browser: IE 7

jQuery: 1.2.4a

jQuery UI: 1.5b2

js: ui.sortable.js

If a sortable item's height is large and you wish to move the item, it has a hard time doing so given the calculations currently in place. Sometimes it may require dragging the sortable item beyond the confines of the browser window to get the sortable action to trigger.

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

/* 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
	});
});