jQueryのdraggableで要素幅が縮んでしまう時の対処法

最近jQueryのdraggableでドラッグできる要素を使っていてあるトラブルに直面しました。

それはドラッグ要素の幅がドラッグしたときに元よりも小さくなってしまう問題です。

という訳でその解決法を見つけたのでここで紹介します。

draggableで要素の幅が狭くなってしまう原因

darggableを使っているとなぜか要素幅が縮むというトラブルに遭遇することがあります。

まずはその原因については少しだけ説明します。

 

ではまず次のようにドラッグさせる要素として次のdiv要素を作ったとしましょう。

 

それでこれをドラッグ可能な要素にするために必要なのが次のjQueryコード

helperオプション'clone' を指定していますがこれは元の要素のコピーを作るオプションです。

これを指定しておけばドラッグしたときに元の要素が残るという訳です。

 

それでこの helper オプションというのがドラッグ要素の幅が縮む原因だと分かりました。

より詳しく書くと要素の縮むが発生してしまうのは次のような条件の時

  • heperオプションで 'clone' を指定した場合
  • ドラッグ要素がブロック要素の場合

多分この2つがコピーされた要素が元の要素サイズにならない原因です。

じゃあどうやって要素の幅を維持すればいいかというとそれが次で紹介する方法

ドラッグ要素の幅を縮ませないための解決法

解決法は簡単でドラッグ要素に対して元の要素の幅を指定すればいいだけです。

幅を指定するタイミングとして一番無駄がないのがドラッグが開始された時点ですね。

 

具体的にどうやればいいかは次のコード例を見てください。

draggableではstartオプションに対してドラッグ開始時に実行したい関数を渡せます。

その中でコピー要素( ui.helper )に対して元の要素の幅をcss関数で指定するだけです。

 

こうしておけば次の CodePen のようにクローン要素の幅が維持されたままドラッグ可能になります。

See the Pen 【jQuery】draggableでドラッグ要素の幅を維持するには by ぴー助 (@pisuke-code) on CodePen.

draggableの関連記事

jQueryのdraggable要素にz-indexを指定して最前面表示する方法

jQueryでdraggable要素のコピー(クローン)を作る方法

ここまでのまとめ

まずdraggableで要素幅が縮む原因となるのが次の2つ

  • heperオプションで 'clone' を指定した場合
  • ドラッグ要素がブロック要素の場合

要素をクローンしていて、それがブロック要素だと要素の幅が維持できないようです。

 

なのでドラッグしたときに元の幅を維持させるにはドラッグ開始時に幅を指定してあげる確実です。

という訳で draggable で作ったドラッグ要素の幅が縮んでしまう時の対処法でした。

ではでは($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください