Opened 12 years ago

Closed 12 years ago

#2931 closed bug (fixed)

Sortable bugs

Reported by: xoli202@… 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>

Change History (1)

comment:1 Changed 12 years ago by paul

Resolution: fixed
Status: newclosed

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.

Note: See TracTickets for help on using tickets.