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についてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

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

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

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

timepickerについて

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