Skip to main content

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 paul comment:1

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.