skillup

技術ブログ

UI デザイン

ブラウザ上でのドラッグ&ドロップの処理

投稿日:

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。

今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。

以前は、multiselectというプラグインを使ってこれを実装しました。

過去のエントリー
jquery multipleについて(基本編)
jquery multipleについて(応用編) keepOrder
このプラグインだと枠が狭いし、見づらいので、ドラッグアンドドロップでこれができないかを調査しました。

実装するポイントとしては下記2点です。

  • ある領域と別の領域の行き来が自由、一方向ではない
  • 枠内でも、枠外でも順番を自由に変更できる

HTML5などでもできるようですが、結果としては、JavaScriptでなんとか実装ができるという結論に。

私のソースよりも元リンクのほうが使えるのでリンクを紹介します。

http://alphasis.info/2011/06/jquery-ui-sortable-connectwith/

最終的には上記のものを使いましたが、ほかにも調べたリンクなぞを。

jQuery draggableを使ったもの

欠点としては片方向のみ。いい点としては要素をコピーするタイプなので移動時に元の要素が消去されない

http://kazefuku.net/archives/308

http://jqui.my-learn.net/draggable/options.php

HTML5を使ったもの

変更イベントをトリガーとしていろいろと設定することが可能

http://www.htmq.com/dnd/

 

-UI, デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

positionを使うときに注意すること

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …

no image

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …

no image

CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。 Contents1 ブロックレベルとインライン1.1 ブロックレベル要素1.2 インライン要素1.2.1 参考リンク2 レ …

no image

レイアウトカラム落ち対策

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 Contents1 flex-wrap:nowrap2 display …