Вопросы Теги

Пользовательский интерфейс jQuery - При перетаскивании строк с помощью Sortable пространство между строками увеличивается

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

Первоначально, 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>

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

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

8
задан Daud 24 September 2015 в 04:25
поделиться