ドラッグ＆ドロップによるDB更新について

質問

DBを参照してWebブラウザ上に動的に表示されているデータを、マウスでドラッグ＆ドロップすることは可能でしょうか。また、マウス操作のみでDBを更新することはできるのでしょうか。
具体的には、以下のようなアルバイトのシフト作成業務を想定して質問しています。

１．データベースに格納されている仕事情報をブラウザ上にグラフ表示する
２．データベースに格納されているスタッフのスケジュール情報をブラウザ上にグラフ表示する
３．仕事情報をスケジュール情報にマウスでドラッグ＆ドロップすることで、仕事をスタッフにアサインし、データベースを更新する

以上です。初歩的な質問かも知れませんが、お知恵をお貸しいただければ幸いです。よろしくお願いします。

回答No.1

feininger · ベストアンサー

JavaScriptを用いてドラッグ＆ドロップは可能です。

以前、CGIとJavaScriptを使って↓のようなものを作ったことがあります。
http://www2s.biglobe.ne.jp/~memo/cgi-bin/postit.cgi

これは単純に1～3を繰り返しています。
　1)CGIでデータを表示
　2)ドラッグ＆ドロップされたら「ナニをドコにドロップしたか？」をCGIへ渡す
　3)CGIでデータの位置情報を更新して1に戻る

シフト表だと、例えば3のところで「ドロップされた位置は何曜日の何時だ」という処理を加えるなどする必要がありそうですね。

補足

早速のご回答ありがとうございます。
添付のURLを拝見させていただきました。ドラッグする度にCGIに位置情報を渡してページをリフレッシュしているのですね。

ところで、静的に表示された長方形でなくてもドラッグできるものなのでしょうか。
（DBを参照して表示している9時-12時の仕事を表す長方形でもドラッグできるのでしょうか）

初歩的な質問で恐縮ですが、ご回答いただける場合はよろしくお願いします。

回答No.2

feininger

> ところで、静的に表示された長方形でなくてもドラッグできるものなのでしょうか。
CGIの長方形も動的に表示させていますよ。
データベースからメッセージとか投稿者名とかを参照して表示させています。
(画面丸ごとCGIで出力しているのですべてが動的といえば動的かな？)

> （DBを参照して表示している9時-12時の仕事を表す長方形でもドラッグできるのでしょうか）
「9時-12時の仕事を表す長方形」をJavaScriptのレイヤーとして表示できれば可能かと。
と言ってもそんな大げさな話ではなく、先のCGIの長方形も単に<div id="～" onmousedown="～"></div>で囲っただけですし・・・

お礼

丁寧な回答をありがとうございました。先のURLを参考にしながら自分でも作ってみようと思います。