Skip to main content

Bug Tracker

Side navigation

#2778 closed bug (fixed)

Opened May 02, 2008 05:55PM UTC

Closed May 03, 2008 08:19AM UTC

Sortables - Items with Large Height cannot sort

Reported by: wjchristenson2 Owned by: paul
Priority: major Milestone: 1.2.4
Component: ui 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

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
	});
});
Attachments (0)
Change History (1)

Changed May 03, 2008 08:19AM UTC by paul comment:1

resolution: → fixed
status: newclosed

This is a known issue that cannot be fixed easily - however, I've added a new tolerance mode to sortables: if you set the option tolerance to "pointer", it will use the pointers position and therefore operate much better. Beware though: This doesn't work too well with nested sortables.