draggableを使ってると悩むことがあってそれが z-index の指定方法です。
ドラッグ要素を最前面に表示したいけどなぜか後ろに表示される・・・
と僕自身も悩むことがあったので、その場合の解決策をここでは紹介します。
このページの目次
draggableにz-indexを指定するには
やり方は簡単で draggable に対して stack または zIndex オプションを指定するだけです。
そのやり方をコードを使って説明すると次の通り
まずドラッグさせたい要素として次のようなdiv要素を作ったとしましょう。
|
1 |
<div class="my_draggable">ドラッグできるよ</div> |
これに対してdraggableを呼び出すときに次のようにstackオプションを指定します。
|
1 2 3 4 5 |
$(function(){ $('.my_draggable').draggable({ stack: '.my_draggable' }); }); |
これでstackオプションに渡したセレクタに該当する要素が一番前に出てきます。
もしセレクタを指定しない場合は次のようにzIndexオプションを使ってもOK
|
1 2 3 4 5 |
$(function(){ $('.my_draggable').draggable({ zIndex: 100 }); }); |
zIndexに100とか200とかの大きな数字を渡しておけば最前面に表示されるはずです。
これがドラッグ要素でz-indexを指定する方法です。
ただこうやって要素を最前面に表示するとまた新たな問題が出てきてしまいました。
ドラッグ要素を最前面表示することで発生する問題
その問題とは何かというとドラッグ要素が常に最前面に出てきてしまうことです。
「え？何言ってるの？」
と思うかもしれませんが、これは実は場合によっては大問題になります。
例えばドラッグしているときにそのドラッグ位置にある要素を調べたいとしましょう。
例えば次のような感じで
|
1 2 3 4 5 |
jQuery('.my-draggable').draggable({ drag: function(e, ui){ belowElem = jQuery(document.elementFromPoint(e.clientX, e.clientY)); } }); |
elementFromPoint というのが指定座標での要素を取得できる関数です。
勘のいい人なら上のコードでどのような要素が返されるのか予想がつくかもしれません。
そうです、ドラッグ要素が一番前なので常にドラッグ要素だけが返ってきます！
こういう風に座標指定で要素取得したいときに問題になるんですよね・・・
という訳で何か解決策がないかと探っていたら見つかりました。
やり方は単純で要素取得前にドラッグ要素を消して、取得後にまた表示するという方法です。
例えば次のような感じで
|
1 2 3 4 5 6 7 |
jQuery('.my-draggable').draggable({ drag: function(e, ui){ jQuery(ui.helper).hide(); belowElem = jQuery(document.elementFromPoint(e.clientX, e.clientY)); jQuery(ui.helper).show(); } }); |
こうしておけばドラッグ要素は候補に含まれないので期待通りに要素が取得できます。
ドラッグ要素もjQueryオブジェクトとして認識されることに要注意ですね。
当たり前かもしれないですが、注意しないと要素を取得するときにトラブルが起きてしまいます。
draggableの関連記事
jQueryのdraggableで要素幅が縮んでしまう時の対処法
jQueryでdraggable要素のコピー(クローン)を作る方法
ここまでのまとめ
draggableで作られるドラッグ要素にz-indexを指定する方法は次の２つ
- stackオプションを指定
例 : stack: '.my_draggable'
- zIndexオプションを指定
例 : zIndex: 100
またドラッグ要素が最前面に表示すると要素取得時にトラブルになることもあります。
なので取得前に一旦ドラッグ要素を消すなどの対策も必要ですね、
ということでドラッグ要素にz-indexを指定して最前面に表示する方法を紹介しました。
ではでは($・・)/~~~
