5

私は jsfiddle.net を使用して、スケジュールするアイテムをドラッグ アンド ドロップするスケジューラのプロトタイプを作成しようとしました。「割り当てられていない」リストからスケジュール テーブルにドラッグ アンド ドロップできました。また、スケジュール表から削除できるようになりました。私が頭を悩ませているのは、テーブル内のアイテムをテーブルの別の場所に移動することです。

フィドルはここにあります。内部ドラッグアンドドロップを機能させるための提案をいただければ幸いです。私は一日中これに取り組んでおり、視界がぼやけ始めています。ああ、ぜひとも、私がやっていることをもっとうまくできると思うなら、変更を加えてください。フィドルのバージョンを教えてください。

アップデート

@SMathew と @darksky に従って、表のセルを直接移動するのではなく、その内容を移動するフィドル全体を再構築しました。

divs や sを使用することをお勧めしたことは知っていますspanが、テーブルの構造、特に を使用しrowspanてセルの高さを 30 分単位で指定したいと考えています。ソース サイトで影響を受けたセルを復元し、ターゲット サイトでrowspanと競合するセルを削除する必要があるため、唯一のバグはセル (またはその内容) を移動することです。rowspan

更新されたフィドルはここにあります。

更新 2 (最終)

それで、私は再び製図板に戻り、64 回のフィドルの後、ようやくやりたいことができるようになりました。最後に、テーブルの構造を操作せずにすべてを正常に動作させるためのトリック。私がしなければならなかったのは、行スパンの邪魔になっているセルを に設定することだけでしたdisplay: hidden

とにかく、興味のある人のために、新しいフィドルはこちらです。Chrome には API の処理に問題があることがわかりました。私はフィドルでそれらを指摘しました(部分的な暴言とともに)。

4

1 に答える 1

8

問題は、td 要素をドラッグ可能にしようとしていることです。そのようなテーブルから td 要素を削除/挿入するときは、バランスをとるために空のセルの束を作成する必要があります。テーブルをそのままにして、ドラッグ可能な要素を div または span タグでラップすることをお勧めします。このようにして、テーブル構造は決して変わりません。コードもはるかにシンプルで効率的になります。

于 2012-08-02T06:22:41.317 に答える