Dojoでリモートのライブラリとローカルの自作コードを両立させる方法

Dojoでネット上にあるライブラリと，自前サーバにある自作コードを両立させて使う方法をメモしておきます．

まずは，状況設定です．「http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js」に置かれているものをライブラリとして使うことにします．一方，次の図の「war/js/rfj」ディレクトリに置かれている「ScrollBar.js」を自作コードとして使うことにします．

この状況下で「ScrollBar.js」ファイルで定義されている「ScrollBar」クラスを「war/scroll_bar_test.html」ファイル内で使うためには，次のようなコードを記します．

<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
  djconfig="parseOnLoad: true,
    baseUrl: './', modulePaths: {'rfj': 'js/rfj'}">
</script>
<script type="text/javascript">
dojo.require("rfj.ScrollBar");

dojo.addOnLoad(function() {
  var scrollBar = new rfj.ScrollBar();
);
</script>

ポイントは，最初のscript要素にあるdjconfig属性の値にあります．ローカルのコードが置かれている場所を「baseUrl: './', modulePaths: {'rfj': 'js/rfj'}」という記述で指定します．

baseUrlには，自作コードへのパスを記す際の起点となるディレクトリをこの記述が記されたHTMLファイルから見た相対パスで記します．今回は，「war/scroll_bar_test.html」ファイルがあるのと同じディレクトリを起点とするので，「./」を指定しています．

modulePathsには，Dojoでいうところのモジュールを置いてあるディレクトリのパスを記します．このパスは，baseUrlで指定したディレクトリからの相対パスとなります．「ScrollBar」クラスが定義されている「ScrollBar.js」ファイルは「war/js/rfj」ディレクトリにあるので，そのディレクトリを「war/scroll_bar_test.html」ファイルのあるディレクトリからの相対パスで記すと，「./js/rfj」となります．

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に固有のもののようです．