jQuery-UI 的 Sortable 函数不必要地移动 div答案

【问题标题】：jQuery-UI's Sortable function moves div unnecessarilyjQuery-UI 的 Sortable 函数不必要地移动 div
【发布时间】：2010-09-27 07:12:01
【问题描述】：

我使用 jquery-ui 的可排序演示已经有一段时间了。

仔细观察，我发现它稍微推动了 div。

这是一个在线演示：http://jsbin.com/ijusu3

尝试将中间的那个向左移动，然后你可以看到右边的那个向左微移大约 2 个像素。

我想知道为什么。这弄乱了我的其他功能。

PS：如果jsbin不显示代码，这里是：

<!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>

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

原因真的很简单（尽管在我看到你的 CSS 之前我不能确定这是否真的是原因）。

当您将ui-widget 类添加到divs 时，您还添加了一个1px 宽的边框。边框在div 除了之外占据了您定义为宽度的 78px 的任一侧的一个像素，因此它们的实际宽度为 80px。

再加上您为列指定了 78px 的宽度，这意味着列对于它们的内容来说太窄了，因此当最后一个元素被删除时，列会从 80px 恢复到 78px。

我不得不修改您的jsbin demo 以使用 jQuery 和 jQuery UI，因此 CSS 与您正在使用的不同，因此我可能错了。将列宽更改为 80 像素会阻止列移动。

【讨论】：

非常感谢您解释 ui-widget 的工作原理。这似乎解决了我的演示代码中的问题。有没有办法让我看到你的 jsbin 代码？
@Hrishikesh 就在那儿-答案中的链接，您可以按右上角出现的“编辑”按钮