1

テーブルの行をドラッグアンドドロップして並べ替えることができる基本的なjQueryスクリプトを作成しました。すべてがうまく機能しています-私が理解できない唯一のことは、ドラッグされている間に行の「ゴースト」画像を作成する方法です。

行のクローンを作成してみました

$(this).clone().addClass('dragClone');

次のCSSを使用

.dragClone{opacity:0.4;position:absolute;z-index:1500;}

しかし、何も現れませんでした。TRがテーブル内に存在する必要があるかもしれないと考えて、テーブル全体のクローンを作成し、行を空にして、選択したTRを次のように追加しました。

$('.dragTable').clone().addClass('dragClone');$('.dragClone').find('tbody').empty().append($('.origZone'));

（origZoneは、ドラッグされるTRに与えられるクラスです）

まだ何も表示されていません。

私はこれまでクローンを使用したことがないので、私が近くにいるのか、それとも正しい方向に進んでいるのかまったくわかりません。目標は、Redips_dragプラグイン（http://www.redips.net/javascript/drag-and-drop-table-row/）で使用されているものと同様のゴーストイメージを作成することです。

4

1 に答える 1

0

私は次のことを行うことでこの問題を解決することができました：

ページに空のdivを作成します。

if($('#dragContain').length<1){$('body').append('<div id="dragContain"style="width:96%;height:1px"></div>');}

含まれているテーブルを変数に保存し、クローンを作成し、tbodyの内容を削除して、theadを非表示にし、変数として保存された行を追加し、前述のdivに追加しました

$table=$(this).closest('.dragTable');$row=$(this).closest('tr').clone();

$table.find('tbody').remove();$table.find('thead').hide();$table.append($row);$('#dragContain').addClass('dragClone').append($table);

これがそれを達成するための最良の方法であったかどうかはわかりませんが、機能します。

参考までに-下にある行でホバー効果を機能させるには、次のCSSを使用する必要がありました

#dragContain{pointer-events:none;}

これが誰かを助けることを願っています！

于 2012-11-09T07:33:23.000 に答える