script.aculo.us の Sortable をdivのスクロール内で複数使う場合の注意事項

今朝、tweetAngelをいじってて初めて気づいたこと(爆)
左側の選択画面で、スクロールしたあとにドラッグドロップしたら・・・変なとこに飛んじゃうんですよ。
いろいろ調べたら・・・div要素でscrollをありにしてある場合、scrollオプションを指定しないとだめみたいです。

該当箇所を引用すると、

scroll
Default: none
When the sortable is contained in an element with style overflow:scroll, this value can be set to the ID of that container (or the container’s DOM object). The scroll position of the container will now move along when the sortable is dragged out of the viewable area. The container must have overflow:scroll set to include scroll bars. Does not yet work for scrolling the entire document. To get this to work correctly, include this line in your code before creating the sortable: Position.includeScrollOffsets = true; Update: Scrolling the whole document does work (at least on Safari 3.2 (Mac), IE7 and Firefox). Use scroll: window

そんなわけで、ざっと要約すると、

  • スクロール要素のidを(Sortable.createの)オプション引数に渡せ
  • Sortable.createする前にPosition.includeScrollOffsets = true;を実行しろ

・・・ってことです。
つまり、こう。

    Position.includeScrollOffsets = true;
    Sortable.create( category_name , {scroll: 'choicetweet'} );

そして。
スクロール要素内に複数のSortableリストがある場合、リストを増やしたときは全部に対して再度Sortable.createしないとだめくさいです。

    Position.includeScrollOffsets = true;
    for ( i = 0 ; i <= newCatNo ; i ++ ) {
      Sortable.create("tw_cat_" + i + "_body" , {scroll: 'choicetweet'});
    }

おまけ。
JavaScriptの連想配列ってなーに?ってかたのために。
JavaScript の配列と連想配列の違い – IT戦記

Comments are closed.