jquery - Drop() 使用 Sortable/Droppable 调用两次

Question

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

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);
               });
       }
   
   });
   

Answer 1

我很好奇，所以我做了一些玩弄这个。

在我的测试中，我没有看到'receive'事件触发了一个droppable。鉴于此，我查看了您的代码，似乎您想在新删除的代码上设置 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'));
}