使用Sortable / Droppable调用Drop（）两次 [英] Drop() gets called twice with Sortable/Droppable

问题描述

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

I have this code right here. I have two problems though:

1. 在接收函数中，我们如何才能获得刚刚被放入可排序元素的元素？不是用来放弃一个新的那个，而是那个被放入列表的那个？



2. 由于我找不到，我决定使用drop（）函数，但现在，为什么该函数被调用两次？！我不希望这样！

1. In the receive function, how can we get the element that just got dropped into the sortable? Not the one that was used to drop a new one, but the actual one that got dropped into the list?

2. Since I couldn't find that, I decided to use the drop() function, but now, why is that function getting called twice?! I don't want that!

$( "#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);
            });
    }

});

推荐答案

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

I was curious, so I did a bit of playing around with this.

在我的测试中，我没有看到'接收'事件发生火灾玩。鉴于此，我查看了你的代码，似乎你想在新删除的时候设置id。所以，我确实把这个放在一起： http://jsfiddle.net/ER5Jd/ - 用它来看看它在行动中添加ID并列出最后一个列表项ID。

排序并在排序后显示列表中新的最后一个。我希望它对你有所帮助。
注意：drop中的ui.helper是在屏幕上拖动的辅助项（可拖动的克隆集），但实际的克隆是来自可拖动的。

I did not see the 'receive' event fire at all in my testing with a droppable in play. Given that, I looked at your code, and it seems you want to set the id on the newly dropped. So, I did put together this: http://jsfiddle.net/ER5Jd/ - use that to see it in action adding the ID and listing the last list items id.
Sort and it shows the new last one in the list after the sort. My hope is that it helps you. Note: ui.helper in the "drop" is the helper item that is dragging around the screen (draggable clone set) but the actual clone is from the draggable.

我的加价：

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

这篇关于使用Sortable / Droppable调用Drop（）两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！