如何访问被删除的元素答案

【问题标题】：How to access the dropped element如何访问被删除的元素
【发布时间】：2013-01-07 11:40:05
【问题描述】：

我正在使用带有 connectToSortable 和克隆选项的可拖动fiddle：

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 但我看不到获取删除元素的方法。

（上面的代码原贴在question 有不同的问题）

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案1】：

要获取它所在的元素，您可以这样做：

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

【讨论】：

到目前为止，我得到了这个“怪物”：console.log($(this).data().sortable.element.context.id); 给了我父母的 id！这有意义还是有更好的方法？（毕竟它确实有效）
@Gazzer 可能有更好的方法，我不知道，但这似乎没有任何问题..

【解决方案2】：

您需要在可放置区域上实例化 droppable：

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

【讨论】：

我之前尝试过类似的方法，但无法正常工作。您能否具体说明上述代码中的 area_selector。

【解决方案3】：

试试这个

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

fiddle这里

【讨论】：

这会得到文本，而不是元素本身。所以我无法得到元素被丢弃的位置。