Opened 15 years ago
Closed 15 years ago
#2931 closed bug (fixed)
Sortable bugs
| Reported by: | Owned by: | paul | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.5.1 |
| Component: | ui.sortable | Version: | 1.5b4 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
Hi,
I tested the sortable with the last trunk code and I found two bugs.
First: When I start the drag of a div, this is displayed out of the sortable (at the bottom), and then if I continue the drag move, the div goes to the original place(I think the problem is in the mouseStart method on sortable.js).
Second: In a sortable list that contains div's with the same height, I can't sort anything to the first position. But in a sortable list that contains div's with different height's, I can only sort to first position the div's that have more height. I think I can only sort a div to first position if it's has more height than the div that is on the top. Maybe the problem is o the tolerance "pointer".
Above are two examples:
The first contains div's with the same height:
<!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.6.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;
} .item {
width: 580px; background-color: yellow; border: 1px ridge maroon; height: 50px; margin-top:10px;
}
.placeHolder {
border: 2px dashed gray;
}
</style>
</head> <body>
<div id="dropZone">
<div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> <div class="item">Item 7</div>
</div>
</body> </html>
The second contains div's with two diferent height's:
<!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.6.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;
}
.yellow_div {
width: 580px; background-color: yellow; border: 1px ridge maroon; height: 50px; margin-top:10px;
}
.orange_div {
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 class="orange_div">orange_div</div> <div class="yellow_div">yellow_div</div> <div class="yellow_div">yellow_div</div>
</div>
</body> </html>
The first issue is fixed, the second issue is not a bug, it's related to containment - since the top containment doesn't allow the dragged item to go more than 50% above the first item, it logically prevents it from being the first item.