jQuery UI - при перетаскивании строк с использованием Sortable увеличивается пространство между строками - PullRequest
8 голосов
/ 23 октября 2011

Я использую виджет Sortable jQuery Ui для реализации функции перетаскивания в строках таблицы. Проблема в том, что если я немного перетащу 2-ю и 3-ю строки вниз (недостаточно для смещения следующей строки), пространство между строками увеличивается. Теперь, если я действительно поменяю 2-й ряд на 3-й (перетаскивая 2-й ниже 3-го), между первым и 2-м рядом накапливается много места. Если вышеуказанные шаги повторяются, мы можем продолжать увеличивать пространство между строками

Изначально Initially

Наконец, Finally

The code is as follows:

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.ui.sortable.min.js"></script>
<script>
    $(document).ready(function() {
        $( "#table tbody " ).sortable({placeholder : 'red',axis:'y',containment:'tbody'});
        $( "#table tbody" ).disableSelection();
    });
</script>
<style>
.red{
    background-color : red;height: 1.5em; line-height: 1.2em;
}
#table{
    border-spacing : 2px;
    background-color : light gray;
}
#table tr{
    background-color : yellow;  
}
body{
    background-color : gray;
}
</style>

</head>
<body>
    <table id="table">
    <thead>
    </thead>
    <tbody>
    <tr>
        <td>
        <label for="name1">Enter name</label>
        <input type="text" id="name1"/>
        </td>
    </tr>
    <tr>
        <td>
        <label for="name2">Enter name</label>
        <input type="text" id="name2"/>
        </td>
    </tr>
    <tr>
        <td>
        <label for="name3">Enter name</label>
        <input type="text" id="name2"/>
        </td>
    </tr>
    </tbody>
    </table>
</body>
</html>

Это плохое использование таблиц, но есть некоторый устаревший код, который я должен терпеть

Кроме того, почему опция заполнителя не работает?

Ответы [ 2 ]

1 голос
/ 15 мая 2012

Похоже, что это связано с межстрочным интервалом таблицы.Если вы установите «table {border-spacing: 0px;}», вы уменьшите ползучесть пространства - не более 1px, если я поставлю границы моей таблицы в моих тестах.

Можете ли вы добавить разметкук столу клетки?Если это так, вы можете вкладывать метку и входные данные в контейнер, который затем можно использовать для создания пробелов.

<tr>
  <td>
    <div style="margin:2px 0;">
      <label for="name1">Enter name</label>
      <input type="text" id="name1"/>
    </div>
  </td>
</tr>
1 голос
/ 10 мая 2012

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

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

Если вы хотите, вы можете сузить jqueryui только до сортируемойсоставляет около 38 КБ

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...