2011年6月4日土曜日

FirefoxにてDIV要素を連続でドラッグ&ドロップできない問題

FirefoxにてDIV要素を連続でドラッグ&ドロップできない問題に遭遇しました.一応解決したので,メモしておきます.

DIV要素を水平にドラッグ&ドロップできるようにしたつもりでしたが,一旦ドロップして再度ドラッグしようとすると,そうならずに半透明になった要素がマウスポインタの動きに合わせて追随してくるという問題にFirefoxで遭遇しました.つまり,次の図のような感じです.


結局,下記のようにCSSを変更すると期待通りの動作をするようになりました.

.scroll_bar-handle {
  position: absolute;
  height: 16px;
  top: 0px;
  background-color: red;
  -moz-user-select: none; /* これを追加 */
}


Firefoxでは,要素に対して操作が行われると,それが選択対象となるようです.続けて選択対象の要素に対して操作を加えようとすると,その分身が表示されます.そして,本体に加えられた操作がその分身に対して適用されるようになるみたいです.その設定を無効にするのが,CSSに新たに加えた1行となります.他のブラウザ(といってもChromeだけですが)では,当初から期待通りに動作していたので,この問題(その仕様を知らなかった僕に問題があるのですが)はFirefoxに固有のもののようです.

0 件のコメント: