Сортируемая функция jQuery-UI перемещает div без необходимости - PullRequest
Новая
       2

Сортируемая функция jQuery-UI перемещает div без необходимости

0 голосов
/ 27 сентября 2010

Я уже некоторое время работаю с сортируемым демо jquery-ui.

При внимательном рассмотрении я обнаружил, что это слегка подталкивает дивы.

Вот онлайн-демонстрация: 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>

1 Ответ

0 голосов
/ 27 сентября 2010

Причина очень проста на самом деле (хотя я не могу быть уверен, что это на самом деле причина, пока я не увижу ваш CSS).

Когда вы добавляете класс ui-widget к этим div s, вы также добавляете рамку шириной 1px. Граница занимает один пиксель с каждой стороны от этих div в дополнение к 78 пикселям, которые вы определили как их ширину, таким образом, их фактическая ширина составляет 80 пикселей.

Это в сочетании с тем фактом, что вы указали ширину столбцов в 78 пикселей, означает, что столбцы слишком узкие для своего содержимого, поэтому при удалении последнего элемента столбец возвращается к 80 - 78 пикселям.

Мне пришлось изменить вашу jsbin demo для работы с jQuery и jQuery UI, чтобы CSS не совпадал с тем, который вы используете, поэтому я могу ошибаться по этому поводу. Изменение ширины столбца до 80 пикселей остановило перемещение столбцов.

...