jQuery-UI's Sortable function moves div unnecessarily_问答_开发者

jQuery-UI's Sortable function moves div unnecessarily

开发者 https://www.devze.com 2023-01-17 12:52 出处：网络

I have been working with jquery-ui\'s sortable demo for a while. On looking closely, I found that it nudges the divs slightly.

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-c开发者_JS百科ell; 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>

The reason is very simple really (though I cannot be sure if this is actually the reason until I see your CSS).

When you add the ui-widget class to those divs, you're also adding a 1px wide border. The border takes up one pixels on either side of those div in addition to the 78px you defined as their width, thus their actual width is 80px.

This, combined with the fact that you've specified a 78px width for the columns, means that the columns are too narrow for their content, thus when the last element is removed the column reverts back from 80px to 78px.

I had to modify your jsbin demo to work with jQuery and jQuery UI, so the CSS isn't the same as the one you're using, thus I might be wrong about this. Changing the column width to 80px stopped the columns from shifting around.