あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。
今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。
以前は、multiselectというプラグインを使ってこれを実装しました。
過去のエントリー
jquery multipleについて(基本編)
jquery multipleについて(応用編) keepOrder
このプラグインだと枠が狭いし、見づらいので、ドラッグアンドドロップでこれができないかを調査しました。
実装するポイントとしては下記2点です。
- ある領域と別の領域の行き来が自由、一方向ではない
- 枠内でも、枠外でも順番を自由に変更できる
HTML5などでもできるようですが、結果としては、JavaScriptでなんとか実装ができるという結論に。
私のソースよりも元リンクのほうが使えるのでリンクを紹介します。
最終的には上記のものを使いましたが、ほかにも調べたリンクなぞを。
jQuery draggableを使ったもの
欠点としては片方向のみ。いい点としては要素をコピーするタイプなので移動時に元の要素が消去されない
jQueryUIの使い方 draggable(options)
HTML5を使ったもの
変更イベントをトリガーとしていろいろと設定することが可能
