Opened 10 years ago

Closed 7 years ago

#4920 closed bug (wontfix)

Sortable works incorrect if contains divs with style "float"

Reported by: dzuchara Owned by:
Priority: major Milestone: 2.0.0
Component: ui.sortable Version: 1.7.2
Keywords: sortable div float Cc:
Blocked by: Blocking:

Description

My sortable consists of DIVs, that consists of DIVs, that have "float: left" CSS style.

Problems:

  1. I can't drag items, because when I release mouse button they are coming back to the original position.
  2. When I press mouse button helper is shown on 100 px up mouse cursor, instead being UNDER mouse pointer
  3. Also placeholder is NOT shown where it should be shown (if you try to drag 2 or 3rd element than you will NOT see it at all).

I have this bug on latest FF, Safari, Chrome, IE. (WinXP SP3).

I figured out that this all happens because of float: left style.

Try the following example (also attached) to see all the problems. And after that comment or delete float style and all will work as it was planned (except layout).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head> 
	<title>test site</title>
	
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>

	<style>
		
		.float1 {
			float: left;  /* try to comment or delete this line and you will see that all wlll work fine */
			width: 48%;
			background-color: #CDFECD;
			padding: 3px;
		}
	
		.blank {
			background-color: #2B65EC;
			width: 100px;
			height: 20px;
		}
	</style>
	
</head>

<body>
	
	<div id="mainSortingContainer">
	
		<div class="sorting_item">
			<div class="float1">float element 1</div>
			<div class="float1">float element 1</div>
		</div>
		<div class="sorting_item">
			<div class="float1">float element 2</div>
			<div class="float1">float element 2</div>
		</div>
		<div class="sorting_item">
			<div class="float1">float element 3</div>
			<div class="float1">float element 3</div>
		</div>
		
		<div style="clear:both;"></div>
	</div>
	
	<script>
		$(document).ready(function(){
			$('#mainSortingContainer').sortable({
					placeholder:	'blank',
					item:	'div.sorting_item'
				}
			);
	
		});
	</script>
		
</body>

Attachments (1)

FloatSortingBug.html (1.4 KB) - added by dzuchara 10 years ago.
Live Bug Example

Download all attachments as: .zip

Change History (6)

Changed 10 years ago by dzuchara

Attachment: FloatSortingBug.html added

Live Bug Example

comment:1 Changed 10 years ago by Jörn Zaefferer

Milestone: TBD1.8

comment:2 Changed 10 years ago by Jörn Zaefferer

See also #4830

comment:3 Changed 9 years ago by joelfinch

This is not a fault in sortable. The sample code has divs as the sortable elements, whose only contents are float:left divs. Since all content is floated, the elements being sorted have no height of their own. Applying a border to the sorting_item class shows this more clearly.

Applying a fixed height to the sorting_item class solves the issue (or any other method, such as clearfix hacks, which forces the sorting_item container to have height).

As an aid to diagnosing problems like these, I suggest putting a distinct border or background on every element you're working with, so that you can see how big and where it is, in order to determine whether the problem is a CSS deficiency or a code bug.

comment:4 Changed 7 years ago by Scott González

Milestone: 1.9.02.0.0

comment:5 Changed 7 years ago by mikesherov

Resolution: wontfix
Status: newclosed

Thanks for contributing! As joelfinch points out, there are easy ways to work around this problem, and it would be extremely difficult to resolve this issue in the core sortable code itself. Considering that, I'm going to mark this as "wont fix". Please feel free to submit a new bug report with a valid test case on jsfiddle if you feel this was in error.

Note: See TracTickets for help on using tickets.