【jQueryUI】draggableとsortable使ったドラッグ＆ドロップで、ドロップ後のオブジェクトを取得する方法

Question

タイトルの通りdraggableとsortable使ったドラッグ＆ドロップで、ドロップ後のオブジェクトを取得する方法が知りたいです。

具体的なコードは以下になります。
liをドロップ後に、ドロップした方のli(ul#ul_2側)に対して処理を行いたいので、そちら側のliのオブジェクトを取得したいです。
ドロップ元(ul#ul_1側)のliオブジェクトの取得方法はあったのですが、上記はぐぐっても見つけることができませんでした。

どのようにすればよいでしょうかご教授ください。

html

<ul id="ul_1" style="width:350px;height: 150px;background: papayawhip;">
    <li class="dragg_item">鈴木 090-XXXX-XXXX</li>
    <li class="dragg_item">佐藤 080-XXXX-XXXX</li>
</ul>
<ul id="ul_2" class="drop_area" style="width:350px;height: 150px;background: wheat;">
</ul>

javascript

$( function() {
    $( '.drop_area' ).sortable( {
        revert: true,
        cursor: 'move',
        receive: function(event, ui) {
        //ここでドロップ後のli要素に対して処理を行いたい。            
        }
    } );
    $( '.dragg_item' ).draggable( {
        connectToSortable: '.drop_area',
        helper: 'clone',
        revert: 'invalid',
    } );
} );

バージョン
jQuery 1.72
jQuery UI 1.8.18

Answer 1

または、

$(function() {
    $('.drop_area').sortable({
        revert : true,
        cursor : 'move',
        receive : function(event, ui) {
             var item = $(this).find('.hoge');
            //ここでドロップ後のli要素に対して処理を行う。
            $(item).removeClass('hoge');
        }
    });

    $('.dragg_item').draggable({
        connectToSortable : '.drop_area',
      //helper: 'clone',
        helper : function() {
            return $(this).clone().addClass('hoge');
        },
        revert : 'invalid',
    });
});

これでいかがでしょうか

Comments

[blackonyx]

ちょっと解説というか言い訳すると、レシーブイベントから件のクローンされたjQueryオブジェクトを直接取得することが難しいようで、ならばドラッグされた時にクローンを生成するヘルパーに細工をして目印となるクラスを追加してフラグを建てて、レシーブイベント時にあらためて取得する方法をとりました。

[kazu56]

たくさんの回答ありがとうございます！
上記方法でうまくいきました。yunnさんと同じ方法なので、そちらにベストアンサーをつけました。すみません。

[blackonyx]

Goodです。

Answer 2

単純に
---javascript
receive: function(event, ui) {
var item = ui.item;
// 処理
}

とかでしょうか

Comments

[kazu56]

ui.itemだと、ドロップ元(ul#ul_1側)のliオブジェクトが取れてくると思います。
ドロップ先(ul#ul_2側)のliオブジェクトが取得したいです。

[blackonyx]

クローンの方ですか？

[kazu56]

そうです！

[blackonyx]

大した確信はないけどui.helperかな

[kazu56]

console.logで確認したところui.helperはnullでした。。

[blackonyx]

stop: function(event, ui){
var item=ui.item;
// 処理
}
とやると、ご所望の動作になるかと思いますが...

Answer 3

$(this).children('li')
ということではなく、ドロップされたばかりのliをひとつだけ、ということですかね？
落とされた時ではなく、つかまれた時にAddClassしてあげて
落とされた時（またはキャンセル状態になった時）にRemoveClassしてあげる
というのは、よくある手だと思います。

もっと簡単な手があれば私も知りたいです。

Comments

[kazu56]

>ドロップされたばかりのliをひとつだけ、ということですかね？

そうです！

>つかまれた時にAddClassしてあげて
>落とされた時（またはキャンセル状態になった時）にRemoveClassしてあげる

なるほど！参考にさせて頂きます！

[kazu56]

一番最初に解決手段を書いてくださったのでベストアンサーにしました。

[cest-bien]

$(ui.draggable) でとれないですか？