jquery - ドロップされた要素にアクセスする方法

Question

私はconnectToSortableでドラッグ可能を使用しており、このフィドルでクローンオプションを使用しています：

var draggable_opts = {
        connectToSortable: ".sph-callout-portlet",
        helper: "clone",
        opacity: 0.75,
        revert: 'invalid',
        stop: function(event, ui) {
            // this seems to only access the original item not the clone
        }
    };

$(function() {
    $( ".sph-callout-portlet" ).sortable({
        opacity: 0.75,
        placeholder: "ui-state-highlight",
    }).disableSelection();

    $( "#sph-callout-portlet-avail li" ).draggable(draggable_opts);

});

要素をドロップするときに、ドロップされた領域のID、または少なくとも要素自体を取得したいと思います。さて、ドキュメントのdraggable + connectToSortable + clone使用によるとdroppable、ドロップされた要素を取得する方法がわかりません。

（上記のコードは元々、別の問題のある質問で投稿されました）

Answer 1

ドロップされた要素を取得するには、次のようにします。

$(".sph-callout-portlet" ).sortable({
   opacity: 0.75,
   placeholder: "ui-state-highlight",
   receive: function(event, ui) {
     console.log($(this).data().sortable.element);
   }
}).disableSelection();

Answer 2

これを試して

 $( "#sph-callout-portlet-avail li" ).droppable({
     drop: function (event, ui) {
       console.log(ui.draggable.text());
     }
 });

ここをいじる

Answer 3

ドロップ可能領域でドロップ可能をインスタンス化する必要があります。

$(area_selector).droppable({
    drop: function (event, ui) {
        var $area = $(this); // The droppable
        var $draggable = ui.draggable; // The draggable
    }
});