0

実証された問題: http://jsfiddle.net/VLvj9/1/

htmlで

<table>
    <tbody class="sortme">
        <tr><td>Foo</td></tr>
        <tr><td>Bar</td></tr>
        <tr><td>Really long and annoying table row, try to sort me!</td></tr>
    </tbody>
</table>

そしてjqueryui

$(".sortme").sortable({
    containment: "parent",
    tolerance: "pointer"
}).disableSelection();

いずれかの長い行をドラッグして並べ替えようとすると、親コンテナーの幅が狭くなります。ヘルパーは、新しい小さな親によって画面から押し出され、並べ替えることができません。

containmentこれは、属性がないと発生しません。イベントでプレースホルダーの幅を変更しstart()て親の幅を維持することはできますが、その時点までにコンテインメント情報が既に設定されているようで、ヘルパーは同じ動作を示します。

コンテインメントが期待どおりに機能するように、親に幅情報を維持させる方法はありますか?

この質問は同じ動作を指していると思います：

テーブル行でソート可能なjQueryUIは、ドラッグ中にそれらを縮小します

私の問題は、テーブル コンテンツが ajax 呼び出し (ユーザー <input> コンテンツのステータス チェック) によって取り込まれ、幅がページの有効期間中に任意に変更される可能性があるため、td またはテーブルに px 幅を設定できないことです。

4

1 に答える 1

0

両親の幅をパーセンテージで定義します。

<table style="width:100%;">
<div class="sortme" style="display: inline-block; width:100%;">

これが更新されたフィドルです

編集

幅をパーセンテージで表示したくないので、最も幅の広い要素の幅を計算して、それを親に適用しました。これがコードです

var width = $('.sortme div').width(); //Returns max width from all the matched elements
$('#sortDiv').width(width);
var width2 = $('.sortme tr td').width(); //Returns max width from all the matched elements
$('#sortTable').width(width2);

働くフィドル

于 2013-02-15T05:37:46.900 に答える