jquery之Drop() 被 Sortable/Droppable 调用两次

我这里有这段代码。但我有两个问题:

1. 在接收函数中，我们如何获取刚刚放入可排序的元素？不是用来放置新的那个，而是实际放入列表中的那个？

2. 由于我找不到它，所以我决定使用 drop() 函数，但现在，为什么该函数被调用两次？!我不想这样!

   $( "#sortable" ).droppable({ 
    
       activeClass: "ui-state-default", 
       hoverClass: "ui-state-hover", 
       drop: function( event, ui ) { 
           $(ui.draggable).editable(function(value, settings) {  
                return(value); 
                },{ 
                tooltip     : "Click to edit" 
             }); 
       } 
   }).sortable({ 
    
       revert: true, 
       receive: function(event, ui) { 
           $(this).children("li").each(function(index) { 
               $(this).attr("id", "content-" + index); 
               }); 
       } 
    
   }); 
   

请您参考如下方法:

我很好奇，所以我做了一些尝试。

在我的测试中，在使用可放置的游戏时，我根本没有看到“接收”事件触发。鉴于此，我查看了您的代码，看来您想在新删除的内容上设置 id。所以，我确实把这个放在一起:http://jsfiddle.net/ER5Jd/ - 使用它来查看添加 ID 并列出最后一个列表项 ID 的操作。
排序并显示排序后列表中新的最后一个。我希望它对您有帮助。 注意:“drop”中的 ui.helper 是在屏幕上拖动的辅助项(可拖动克隆集)，但实际克隆来自可拖动。

我的标记:

<ul id='firstOne'>First 
    <li class='listItem'>oneF</li> 
    <li class='listItem'>twoF</li> 
</ul> 
<ul id='secondOne'>Second<span></span> 
    <li class='listItem'>oneS</li> 
    <li class='listItem'>twoS</li> 
</ul> 

我的代码:

$('#firstOne .listItem').draggable({ 
    helper: 'clone' 
}); 
giveId($('#secondOne'));// initial ids set 
 
$("#secondOne").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    drop: function(event, ui) { 
        $(ui.draggable).clone().css('background-color', 'pink') 
          .attr('id', 'content-' + ($(this).find('.listItem').length + 1)) 
          .appendTo(this).siblings().css('background-color', 'yellow'); 
        showId($(event.target)); 
    }, 
    accept: '#firstOne .listItem' 
}).sortable({ 
    revert: true, 
    update: function(event, ui) { 
        showId($(event.target)); 
    }, 
    receive: function(event, ui) { 
        alert('receipt'); 
    } 
}); 
 
function giveId(list) { 
    list.find(".listItem").each(function(index) { 
        $(this).attr("id", "content-" + index); 
    }); 
    showId(list) 
} 
// show the last items id 
function showId(list) { 
    list.find('span').text(list.find('.listItem:last').attr('id')); 
}