jQuery UIのDroppableにて

質問

jQuery UIのDroppable要素にDraggable要素をドロップした際に、どのDraggable要素をドロップしたのか判定したいのですが、どうすれば判定できるのでしょうか？

例えば
http://stacktrace.jp/jquery/ui/interaction/droppable.html
上記のサイトのページ下の方にあるサンプルで、blueのDraggable要素をpinkにドロップした際に、「blueの要素がドロップされたよ」みたいのをalertで出すようなことをしたいです。

回答No.1

reggaepunc · ベストアンサー

たぶんこれでいけるはず。
当方の環境ではできました。

↓この場所に1行追加するだけ。
--------------------------------------
drop: function(ev, ui) {
// ドロップされたときにDraggable要素を複製して追加
ui.draggable.clone().appendTo(this);

// ↓これを追加。
alert( $(ui.draggable).text().trim() + 'の要素がドロップされたよ！' );
},
--------------------------------------

お礼

回答ありがとうございます。
教えていただいたスクリプトでは、上記のサイトだと.blueとかのdraggable要素の中のテキストを取得できました。

参考させていただき、classIDの方を取得する場合に、
alert( $(ui.draggable).attr("class") + 'の要素がドロップされたよ！' );
に変更したら、
「draggable blueの要素がドロップされたよ！」
が表示されるのではなく、
「draggable blue ui-draggableの要素がドロップされたよ！」
となりました。前者の方だけを取得したいですが、
ui-draggableのところを削除するスクリプトを書くというやり方ではなく、
直接取得する方法がありましたら教えていただけないでしょうか。
宜しくお願いします。

回答No.2

reggaepunc

xhtmlで書いてるなら、
----------------------------
<div rel="blue" class="blue">.blue</div>
----------------------------
↑みたいに、rel属性とかを適当に作って、
----------------------------
$('.blue').attr('rel')
----------------------------
↑で取得する方法もありだと思いますよ。

もし、なんらかの属性つけるのができないなら、
----------------------------
.indexOf('blue')
----------------------------
などでマッチさせて、
「blue」の文字列があるときは、
「blue」を表示させる関数を挟んでやればいいかなと。

お礼

ご回答ありがとうございます。
これまで知らなかったことを学習できました。