« Zend DBでは同一カラム名は扱えない | トップページ | pg_xlogのパンク再び…… »

2015.08.14

jQueryUIを使ってドラッグ&ドロップで線を引く

HTML5というかSPAというかに結構真面目に取り組み始めている。
その中でやっぱり老舗のjQueryのありがたさというのを痛感する日々なのであるが、今回はjQueryのプラグイン群の中でも特に使い勝手が良いUI拡張プラグインを使ってみたのでメモり。
(以前事故って書きかけのまま公開してたのを清書!)
MS Accessのクエリデザインきに、二つの表ボックスからドラッグ&ドロップをするだけでJOIN関係を構築してくれる機能がある。
同じような挙動をウェブ上でもやってみようと思ったのがきっかけでちょいと調査をしたところ、ドラッグ&ドロップならjQueryUIが便利というのが巷の評価であった。jQueryUIは別にドラッグ&ドロップだけを実現するのが目的のプラグインではないがかなり手軽にドラッグ&ドロップ機能を実装できることは間違いない。
今回の挙動でのポイントは下記
    1.すべての項目がドロップする方にもドロップされる方にもなる
    .2.D&Dでの関連づけが終わったら元の配置に戻る
1の実現のために必要なのは、その要素対するプロパティの設定である。多くの紹介サイトではわかりやすさのためにドラッグかドロップのどちらかしかできないような設定が多いが、単純に両方の属性を設定してしまえばよい。
すなわち
$(document).on('click' , (function(){
        $('.d-and-d')
        .draggable({
            revert: true,
            proxy: 'clone'
            cursor:'not-allowed',
        })
        .droppable({
            revert:true,
            over: function(){
                document.body.style.cursor = 'copy';
            },
            out: function(){
                document.body.style.cursor = 'pointer';
            },
            drop: function(event, dg){
                var dg_id = dg.helper.context.id;
                var dp_id = $(this).context.id;

                xxxxxx(dp_id, dg_id);
            }
        })
    }))
こんな感じ。
セレクタはIDではなくクラスで指定するのは汎化するためには必要だろう。これで自分自身がドラッグ&ドロップの両方に対応できた。.droppableと.draggableの両方を設定するのがミソである。
あとはdropイベントで線を描画する関数をコールすればできあがり。
2についてはproxy: 'clone'が有効。
こちらを指定すると自分自身ではなくコピーを一時的にD&Dする形になるのである。
ともかくjQueryUIの表現力はかなりのものなので、もうちょっと遊んでみたい。

|

« Zend DBでは同一カラム名は扱えない | トップページ | pg_xlogのパンク再び…… »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/2022/61954372

この記事へのトラックバック一覧です: jQueryUIを使ってドラッグ&ドロップで線を引く:

« Zend DBでは同一カラム名は扱えない | トップページ | pg_xlogのパンク再び…… »