Search and Top Navigation
#2931 closed bug (fixed)
Opened June 01, 2008 06:08PM UTC
Closed June 01, 2008 11:20PM UTC
Sortable bugs
| Reported by: | xoli202@gmail.com | 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>
Attachments (0)
Change History (1)
Changed June 01, 2008 11:20PM UTC by comment:1
| resolution: | → fixed |
|---|---|
| status: | new → closed |
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.