Question

我一直在使用jquery-ui的可排序演示。

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

尝试将中间位置向左移动，然后您可以看到正确的向左移动约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>

Answer 1

原因很简单（虽然我不确定这是否真的是我看到你的CSS之前的原因）。

当您将ui-widget课程添加到div时，您还需要添加1px宽的边框。边框在div 两侧的一个像素上加上到您定义为宽度的78px，因此它们的实际宽度为80px。

这与您为列指定78px宽度的事实相结合意味着列的内容太窄，因此当删除最后一个元素时，列将从80px恢复为78px。

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

jQuery-UI可排序函数不必要地移动div

1 个答案: