Question

I have two <ul>s set up and linked for drag / drop via JQuery. I would like to add some text when the field is dropped to the <li> that has been dropped.

Here is my code – the drop works fine, but I’m not sure how to modify the text.

$(function () {
    $("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable"
     }).disableSelection();
});

Answer 1

You can use any of the event callback functions (click on the “Events” tab) to modify the text. Here I used the update event (demo):

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        update: function(event, ui) {
            // remove other messages
            $('span.message').remove();
            // add message to current item
            ui.item.append('<span class="message"> - dropped!</span>');
        }
    }).disableSelection();
});