Bug Tracker

Opened 12 years ago

Closed 12 years ago

#2778 closed bug (fixed)

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

Change History (1)

comment:1 Changed 12 years ago by paul

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.

Note: See TracTickets for help on using tickets.