#2924 closed bug (fixed)

Opened May 26, 2008 05:03PM UTC

Closed May 26, 2008 07:08PM UTC

Bugs of sortable on drag

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

Attachments (0)
Change History (1)

Changed May 26, 2008 07:08PM UTC by paul comment:1

resolution: → fixed
status: new → closed

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