Dragdealer JSの二つ以上の設置

Dragdealer JSのScroll-barを二つ設置したいのですが、うまく動作しません・・
http://code.ovidiu.ch/dragdealer/を利用して、iframeがわりに(iphone,ipad対策)スクロールバーを設置したいと思っています。
一つは問題なく設置できたのですが、二つ以上の設置が上手くいかず困ってます。

http://code.ovidiu.ch/dragdealer/のソースを利用しています。

（例）
<div class="top-spaced right-float">
<div id="scroll-bar" class="dragdealer rounded-cornered">
<div class="red-bar handle"></div>
</div>
</div>
<div id="scroll-mask" class="top-spaced rounded-cornered">
<div id="scroll-content">
<iframe src="http://www.XXX.net/XX/XX_p.php" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" width="370" height="600"></iframe>
</div>
</div>

<br>
<div class="top-spaced right-float">
<div id="scroll-bar" class="dragdealer rounded-cornered">
<div class="red-bar handle"></div>
</div>
</div>
<div id="scroll-mask" class="top-spaced rounded-cornered">
<div id="scroll-content">
<iframe src="http://www.XXX.net/XX/XX_p.php" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" width="370" height="600"></iframe>
</div>
</div>

上のように２つ設置すると、動作がうまくいきません・・・一つだったら問題なかったのですが、どこをどう変更・修正すれば良いか、もしご存知の方がいらっしゃいましたら、回答宜しくお願い致します。

No.1 ベストアンサー 回答者： yamada_g 回答日時： 2011/04/28 14:51

２つのid（scroll-bar、scroll-mask、scroll-content)が重複しているからだと思います。

１つ目と２つ目のidを変更し、Javascriptコードの
new Dragdealer('scroll-bar',{
・・・
});
をそれぞれのidに対応した２つを書いてあげれば大丈夫だと思います。

この回答へのお礼

回答ありがとうございました。
dragdealer-main.jsファイルにて

var mask = document.getElementById('scroll-mask');
var content = document.getElementById('scroll-content');
var mask1 = document.getElementById('scroll-mask1');
var content1 = document.getElementById('scroll-content1');

new Dragdealer('scroll-bar',
{ ・・・・

new Dragdealer('scroll-bar1',
{・・・・
としてcss,ID等もあわせたところ、二つ動作するようになりました。


お手数おかけしました。

お礼日時：2011/04/28 16:10