Hi there,
I have been working with jquery-ui's sortable demo for a while.
On looking closely, I found that it nudges the divs slightly.
Here's an online demo : http://jsbin.com/ijusu3
Try moving the the center one to the left, then you can see the right ones nudging about 2 pixels to the left.
I would like to know why. This has been messing up the rest of my functionality.
PS: If jsbin doesnt show the code, here it is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Sortable - Portlets</title>
<link rel="stylesheet" type="text/css" href="css/ui-darkness/jquery-ui-1.8.2.custom.css" />
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.2.custom.min.js"></script>
<style type="text/css">
.container { width: 788px; height: 405px; }
.column { width: 78px; height:405px; display:table-cell; vertical-align:bottom;}
.portlet { width: 78px; height: 10px; display: block; position:relative; }
</style>
<script type="text/javascript">
$(function() {
$(".column").sortable({
connectWith: '.column',
helper:'original'
});
$(".portlet").addClass("ui-widget ui-widget-content ui-corner-all");
$(".column").disableSelection();
});
</script>
</head>
<body>
<div id="container" class="container">
<div id="col-0" class="column">
<div class="portlet" id="feeds">
<div class="portlet-content"></div>
</div>
<div class="portlet" id="news">
<div class="portlet-content"></div>
</div>
</div>
<div id="col-1" class="column">
<div class="portlet" id="shopping">
<div class="portlet-content"></div>
</div>
</div>
<div id="col-2" class="column">
<div class="portlet" id="links">
<div class="portlet-content"></div>
</div>
<div class="portlet" id="images">
<div class="portlet-content"></div>
</div>
</div>
</div>
</body>
</html>