Opened 13 years ago
Closed 10 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:
- I can't drag items, because when I release mouse button they are coming back to the original position.
- When I press mouse button helper is shown on 100 px up mouse cursor, instead being UNDER mouse pointer
- 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 (6)
Changed 13 years ago by
| Attachment: | FloatSortingBug.html added |
|---|
comment:3 Changed 12 years ago by
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 10 years ago by
| Milestone: | 1.9.0 → 2.0.0 |
|---|
comment:5 Changed 10 years ago by
| 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.
Live Bug Example