Opened 12 years ago
Closed 12 years ago
#2924 closed bug (fixed)
Bugs of sortable on drag
| Reported by: | Owned by: | paul | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.5 |
| Component: | ui.sortable | Version: | 1.5b4 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
Hi,
I found two possible bugs on sortable:
The first, when I apply the "sortable" to a list that contains a div with some height (like 500px) and set the containment to this list, I cannot drag this div to bottom and sometimes to top. There is an example (try to drag the orange div to the bottom):
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.1EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Draggables Simple Example</title>
<script type="text/javascript" src="js/jquery-1.2.5.js"></script>
<script src="js/ui.core.js"></script> <script src="js/ui.sortable.js"></script> <script src="js/ui.draggable.js"></script> <script src="js/ui.droppable.js"></script> <script type="text/javascript">
window.onload = function() {
$("#dropZone").sortable( {
axis: 'y', containment: $("#dropZone"), scroll: true, helper: 'clone', revert: true, placeholder: 'placeHolder',
});
}
</script> <style type="text/css">
#dropZone {
width: 580px; background-color: #FFFFFF; border: 1px ridge maroon; padding-top: 0px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px;
}
#item2 {
width: 580px; background-color: yellow; border: 1px ridge maroon; height: 100px; margin-top:10px;
}
#item1 {
width: 580px; background-color: orange; border: 1px ridge maroon; height: 550px; margin-top:10px;
}
.placeHolder {
border: 2px dashed gray;
}
</style>
</head> <body>
<div id="dropZone">
<div id="item1">Item 1</div> <div id="item2">Item 2</div>
</div>
</body> </html>
The second bug, if I apply the "sortable" to the same list (divs with different height), and set the property tolerance like "pointer", when I try to drag the small div over the big div, the placeholder don't know were the div should be placed. There is the example:
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.1EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Draggables Simple Example</title>
<script type="text/javascript" src="js/jquery-1.2.5.js"></script>
<script src="js/ui.core.js"></script> <script src="js/ui.sortable.js"></script> <script src="js/ui.draggable.js"></script> <script src="js/ui.droppable.js"></script> <script type="text/javascript">
window.onload = function() {
$("#dropZone").sortable( {
axis: 'y', containment: $("#dropZone"), scroll: true, helper: 'clone', revert: true, placeholder: 'placeHolder', tolerance: 'pointer'
});
}
</script> <style type="text/css">
#dropZone {
width: 580px; background-color: #FFFFFF; border: 1px ridge maroon; padding-top: 0px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px;
}
#item1 {
width: 580px; background-color: yellow; border: 1px ridge maroon; height: 100px; margin-top:10px;
}
#item2 {
width: 580px; background-color: orange; border: 1px ridge maroon; height: 300px; margin-top:10px;
}
.placeHolder {
border: 2px dashed gray;
}
</style>
</head> <body>
<div id="dropZone">
<div id="item1">Item 1</div> <div id="item2">Item 2</div>
</div>
</body> </html>
More one thing, when ever I drag a div, this moves 1px to the right, it is a bug?
Sorry my english.
The first should be fixed in the newest trunk source, the second issue is a duplicate of #2837.