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

破綻しないCSSについて

業務では開発する人間があまりおらず、プログラム以外にもデザイン(CSSなどのレイアウト)やらサーバーやら一人ですべてやることが多いです。 CSSなんかは最初に触ってから4,5年は立ちますけど、系統的に …

no image

パララックス系のギャラリー(中央ネタ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 Contents1 HTML5のメリット1.1 form周りのhtml1.2 文章構造の明確化1.2.1 navに …

no image

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

メインで使う画像のcssについて

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。 画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。 imgタグをd …