Archive for the ‘script.aculo.us’ Category

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戦記

ドラッグ&ドロップで項目入れ替え

『ゆきろぐ・ぷらぷら』のほうでLigitbox2のはなしをだしたんで。

script.aculo.usについて調べてたら、いろいろ遊べる(?)らしい。

そんななか、真っ先に使いたい機能が。
script.aculo.us : マウス(ドラッグ&ドロップ)でリストを順序変更(ソート)する (groundwalker.com)
あ、これはすごい便利!
tweetAngelで順序ソートが出来ればなーと思ってたので・・・!
↓こんなかんじにちゃんと並べ替えた順序でとれるのがgoodですね。
SS200912030945

余談ですが、出てくるserialize関数について。

●2009-12-03 00:27:46 by YoruFukurou
prototype.js の Serialize が、MFCのCDocumentあたりのSerialize と400%くらい別物ってことは理解した。IsStoring() とか ar<< とか ar>> とか無縁ってことで。