script.aculo.usのDroppablesに動的に作成したd

質問

script.aculo.usのDroppablesに動的に作成したdiv要素を追加すると上手くいきません。
script.aculo.usのDraggableとDroppablesを利用しHTMLを挿入する画面を作成しています。
大元のドロップエリアとなる要素はonload時にDroppables.add()で追加しています。このエリアの上へドロップ可能なものをドロップするとdiv要素が追加されます。
やりたい事はこの追加したdiv要素もドロップ可能な要素としてDroppablesに追加したいのです。
実を言うと追加自体は出来ているのですがDroppablesに追加する際のonDrop()の宣言部分で上手くいってません。大元のドロップエリアにドラッグ可能な要素をドロップする際に以下のメソッドを呼び出して追加するdiv要素自体をDroppablesに追加しています。
問題はDroppables.add()の第一引数のelementIdという変数です。これには追加するdiv要素のIDが保存されています。実際にadd()する場合には他の処理で保存したIDが格納されてますのでDroppablesへの追加は出来ているようなのですが問題はそのdiv要素へ他のものをドラッグした場合に呼び出されるonDrop()の定義にあります。
onDrop()が呼び出された時にはelementIdが既に空（null？）となってしまっているようでobjがnullとなってしまいます。
onDrop()の直前にdiv要素を取得出来る方法などありませんでしょうか？以上です。よろしくお願い致します。

function addDroppables(){
Droppables.add(elementId, {onDrop: function(){
var obj = $(elementId);
if(elementOption == 1){
obj.innerHTML = obj.innerHTML + 'aaa';
}
}});
}

回答No.2

fujillin · ベストアンサー

No1です。

＞というか質問させて頂いた問題に関してはクリアする事が出来ました。
とりあえずは、よかったですね。

＞Droppables.add("DIV_1", ・・・)、Droppables.add("DIV_2", ・・・)
＞とした場合ですが最後に追加したdiv要素の方でしかonDrop()が
＞効かないみたいです。
ん！？
No1の回答は、追加するときには
　addDroppable("DiV_1", elementOption);
　addDroppable("DiV_2", elementOption);
のように呼び出すことを前提に回答していますけど…？
（elementOptionがどのようなものなのかもわかってないけど）
追加のときだけでなく、初期設定でも同様の処理であれば使えるはずです。

addDropableってそのためのfunction定義ではないの？

お礼

大変ありがとうございました。問題解決する事が出来ました。

回答No.1

fujillin

script.aculo.usってまったく知らないので、メソッドや文法もわかってないけれど…

elementIdとelementOptionが固有値っぽいのと、onDropがcallbackっぽいので、

function addDroppables(elementId, elementOption) {
Droppables.add(elementId, {onDrop: dropFunc($(elementId), elementOption)});
}
function dropFunc(obj, option) {
return function() {
if(option == 1) obj.innerHTML = obj.innerHTML + 'aaa';
}
}
みたいなことをやりたいということでしょうか？
（あるいは、elementOptionはもとのままでも良いのかも）
（↑）ドキュメンテーションを見てないので、相当にいい加減です。

*　引数がid渡しみたいなので、新しく生成した要素の場合は、機械的に附番するとかでIDも生成しないとならなさそう。

お礼

ご回答ありがとうございます。
ご指摘頂いたように修正したところ状況が少し改善しました。
というか質問させて頂いた問題に関してはクリアする事が出来ました。
ドロップして追加したdiv要素をDroppablesにaddして、それに対して他のドラッグ可能なものをドロップして正常にonDrop()経由でやりたい処理が呼び出せるようになりました。ありがとうございました。

ただ別の問題が発生しまして
div要素を２つ追加した場合、要するに
Droppables.add("DIV_1", ・・・)、Droppables.add("DIV_2", ・・・)
とした場合ですが最後に追加したdiv要素の方でしかonDrop()が効かないみたいです。
原因は恐らくIDを格納する変数であるelementIdが共通のものなので書き変わっている為だと思われます。
私の方で修正して上手くいきましたら報告させて頂きます。
どうもありがとうございました。