skillup

技術ブログ

UI デザイン

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

投稿日:2016年5月7日 更新日:

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

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

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

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

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

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

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

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

複数のリストの境界を越え、ドラッグ&ドロップで並べ替え

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

jQuery draggableを使ったもの

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

jQuery を用いたドラッグ&ドロップのサンプル

jQueryUIの使い方 draggable(options)

HTML5を使ったもの

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

HTMLクイックリファレンス ★HTML5のAPI、および、関連仕様

-UI, デザイン
-

執筆者:


comment

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

関連記事

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

ページレイアウトに関して

今回からは単一のページレイアウトの構成の考え方やテクニックについて。 一般的な傾向として、人間の視覚上の特徴というのは下記のような傾向があげられます。 人の視線は上から下、左から右へというのがディフォ …

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

bulmaフレームワークに関して

以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。 https://bulma.io/documentation/ …

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …