Search and Top Navigation
#4920 closed bug (wontfix)
Opened October 19, 2009 07:41PM UTC
Closed November 05, 2012 11:59PM UTC
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)
Change History (5)
Changed November 18, 2009 10:15AM UTC by comment:1
| milestone: | TBD → 1.8 |
|---|
Changed November 04, 2010 12:27PM UTC by comment:3
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.
Changed October 11, 2012 02:54PM UTC by comment:4
| milestone: | 1.9.0 → 2.0.0 |
|---|
Changed November 05, 2012 11:59PM UTC by comment:5
| resolution: | → wontfix |
|---|---|
| status: | new → closed |
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.
http://jsbin.com/afuta/edit