Geek asks and answers

Drop () is called twice with Sortable / Droppable

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

  • In the receive function, how can we get the element that just got into sorting? Not the one that was used to remove the new one, but the actual one that got on the list?

  • Since I could not find this, I decided to use the drop () function, but now, why does this function call twice? I do not want it!

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

});
+5
source share
1 answer

I was curious, so I played a little with this.

"", . , , , , id . , : http://jsfiddle.net/ER5Jd/ - , , . < > . , . : ui.helper "drop" - , ( ), .

:

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

More articles:


All Articles