HTMLとCSS、Javascript(jqueryも使っています）で

質問

HTMLとCSS、Javascript(jqueryも使っています）でブラウザベースのサーバーサイドアプリ？を作成しています。

部品（のようなもの。画像とかDivタグで作った箱など）をドラッグ＆ドロップで適当に配置し、それらを線
で結んでフローを作る、といったような感じのものを作りたいと思っています。以下に質問を記します。

1. (1).htmlファイルで、テキストフィールドに文字列を入力し、決定ボタンを押下する と、(2).htmlのプルダウンメニューに(1).htmlのテキストフィールドに入力した文字列が項目として追加されるには？

2．部品をドラッグ＆ドロップで配置し、それらを線で結ぶ機能を実装するには？また、何の部品をどこに配置し、何と何が線で結ばれているかを記したxmlファイルに出力するには？

3. 2で出力したxmlファイルを読込み、xmlファイル出力時と同じ状態に復元するには？

この３つのうち、どれか１つでもいいので皆様方の知恵をお貸しいただければと思います。
また、他に使用すべき言語がありましたら御指摘いただけるとうれしいです。

宜しくお願い致します。

回答No.2

babu_baboo

そんなあなたにこそ、ＶＭＬ？

（ふふっ。これくらいなら、むだな、かいとうをしなくてすむぜぇ。この文がむだだけどね ^^;）

回答No.1

SAYKA

1
innerHTML か createElement

2
HTML5のcanvasを使う方が良さそうな気がするけれど斜め線が無いのなら罫線でも良いかも
xmlに出力はブラウザベースだと無理。openでソース表示して保存させるしかない。
jQueryとやらでローカル保存を可能にするplug-inでも有れば別だけどjavascript基盤だから単体ではローカル保存できないと思う(jQueryよくしらないのでごめん)

3
ローカル保存と同じ話。
ローカル読込を実現する方法がjavascript基盤には無いからjQueryとやら(以下略

ブラウザベースではローカルファイルの取り扱いに問題が出るのでそこをどうにかする方法を見つけないとならない。通常はできないのでplug-inを手で作るか使用するブラウザの描画機構(IEならどっかにあるdllとか)を利用したブラウザベースっぽいアプリを作るくらいしかない。

但し、サーバサイドを組み合わせるとちょっと違う。
具体的にはページ上で編集をさせて保存する時は一旦データをサーバへsubmit。それをxml化したものを「ダウンロードデータ」としてユーザ側へ送り返す。
ロードもxmlをアップロードさせ、復元データとしてjavascriptへ投げる(ajax的でなくても良い)形で処理。
当然だけどこの場合、別途サーバ側の処理(まぁCGIだろうけど)が必要になるね