最近jQueryのdraggableでドラッグできる要素を使っていてあるトラブルに直面しました。
それはドラッグ要素の幅がドラッグしたときに元よりも小さくなってしまう問題です。
という訳でその解決法を見つけたのでここで紹介します。
このページの目次
draggableで要素の幅が狭くなってしまう原因
darggableを使っているとなぜか要素幅が縮むというトラブルに遭遇することがあります。
まずはその原因については少しだけ説明します。
ではまず次のようにドラッグさせる要素として次のdiv要素を作ったとしましょう。
|
1 |
<div class="my_draggable">ドラッグできるよ</div> |
それでこれをドラッグ可能な要素にするために必要なのが次のjQueryコード
|
1 2 3 4 5 |
$(function(){ $('.my_draggable').draggable({ helper: 'clone' }); }); |
helperオプションに 'clone' を指定していますがこれは元の要素のコピーを作るオプションです。
これを指定しておけばドラッグしたときに元の要素が残るという訳です。
それでこの helper オプションというのがドラッグ要素の幅が縮む原因だと分かりました。
より詳しく書くと要素の縮むが発生してしまうのは次のような条件の時
- heperオプションで 'clone' を指定した場合
- ドラッグ要素がブロック要素の場合
多分この２つがコピーされた要素が元の要素サイズにならない原因です。
じゃあどうやって要素の幅を維持すればいいかというとそれが次で紹介する方法
ドラッグ要素の幅を縮ませないための解決法
解決法は簡単でドラッグ要素に対して元の要素の幅を指定すればいいだけです。
幅を指定するタイミングとして一番無駄がないのがドラッグが開始された時点ですね。
具体的にどうやればいいかは次のコード例を見てください。
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ $('.my_draggable').draggable({ start: function(event, ui){ jQuery(ui.helper).css({ 'width': jQuery(this).width() }); }, helper: 'clone' }); }); |
draggableではstartオプションに対してドラッグ開始時に実行したい関数を渡せます。
その中でコピー要素( ui.helper )に対して元の要素の幅をcss関数で指定するだけです。
こうしておけば次の CodePen のようにクローン要素の幅が維持されたままドラッグ可能になります。
See the Pen 【jQuery】draggableでドラッグ要素の幅を維持するには by ぴー助 (@pisuke-code) on CodePen.
draggableの関連記事
jQueryのdraggable要素にz-indexを指定して最前面表示する方法
jQueryでdraggable要素のコピー(クローン)を作る方法
ここまでのまとめ
まずdraggableで要素幅が縮む原因となるのが次の２つ
- heperオプションで 'clone' を指定した場合
- ドラッグ要素がブロック要素の場合
要素をクローンしていて、それがブロック要素だと要素の幅が維持できないようです。
なのでドラッグしたときに元の幅を維持させるにはドラッグ開始時に幅を指定してあげる確実です。
という訳で draggable で作ったドラッグ要素の幅が縮んでしまう時の対処法でした。
ではでは($・・)/~~~
