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

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

CSSのレイアウト例 その3 固定+リキッドレイアウト

本日は固定レイアウト+リキッドレイアウトについて。 リキッドレイアウトとはブラウザの幅に合わせて表示を変える方法でして、スマホが一般的となった現在では非常によく使われています。 今回解説するのは例えば …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …