Opened 12 years ago

Closed 12 years ago

#2924 closed bug (fixed)

Bugs of sortable on drag

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

Change History (1)

comment:1 Changed 12 years ago by paul

Resolution: fixed
Status: newclosed

The first should be fixed in the newest trunk source, the second issue is a duplicate of #2837.

Note: See TracTickets for help on using tickets.