0

私はいくつかのテーブルを持っています、例えば:

<table class="table table-hover table-striped" id="mytable">
    <thead>
    <tr>
        <th>#</th>
        <th>Table heading 1</th>
        <th>Table heading 2</th>
        <th>Table heading 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
    </tbody>
</table>

次に、ソート可能なテーブルの行ヘッダーを作成したいと思います。

$('#mytable thead tr').sortable({
    axis: "x",
    helper: "clone"
}).disableSelection();

問題：

ドラッグ アンド ドロップを開始するとth、4 つではなく 6 つの -s が表示されます。

<tr class="ui-sortable">
    <th>#</th>
    <th style="
        display: none;">Table heading 1</th>
    <th class="ui-sortable-placeholder" 
        style="
            visibility: hidden;"></th>
    <th>Table heading 2</th>
    <th>Table heading 3</th>
    <th style="
            display: table-cell; 
            width: 343px; 
            height: 37px; 
            position: absolute; 
            z-index: 1000; 
            left: 184px;" 
        class="ui-sortable-helper">Table heading 1</th>
</tr>

..そして、すべてのマークアップが非常に不安定で不確実になり始めますth。アイテムをテーブル上にドラッグすると、すべての行のサイズがジャンプするのが見えます。

これは、count アイテム (のアイテムth数と等しくない)が原因で発生することは明らかです。tdtr

これを修復する方法は？

4

1 に答える 1

1

ドラッグを開始するたびに、2 つの新しいth要素が作成されます。1つは表示されないため、何の影響もないようです。2 つ目は、ドラッグ中の元の要素のプレースホルダーです。この新しい要素の幅は設定されていないため、列の最大幅に自動的にサイズ変更され、飛び回る原因となっているようです。

これに対抗するために、プレースホルダー要素の幅を、開始関数でドラッグしている要素の幅に変更しました。お役に立てれば

start: function(event, ui){
    $(".ui-sortable-placeholder").css({width: $(ui.item).width()});

以下はコードで、ここに私のフィドルがあります

$(function () {
$('#mytable thead tr').sortable({
    axis: "x",
    helper: "clone",
    start: function(event, ui){
        $(".ui-sortable-placeholder").css({width: $(ui.item).width()});    
    }
}).disableSelection();
});
于 2013-11-14T14:10:21.773 に答える