Используя jQuery перетаскивание UI: изменение перетащенного элемента на отбрасывании

Взяв полный код javascript из предоставленной вами ссылки, вы можете изменить его следующим образом, чтобы заставить его работать:

$(function() {
    $(".elementbar div").draggable({
        connectToSortable: '.column',
        cursor: 'move',
        cursorAt: { top: 0, left: 0 },
        helper: 'clone',
        revert: 'invalid'
    });
    $(".elementbar div, .elementbar div img").disableSelection();
    $(".column").sortable({
        connectWith: '.column',
        cursor: 'move', 
        cursorAt: { top: 0, left: 0 }, 
        placeholder: 'ui-sortable-placeholder',
        tolerance: 'pointer',
        stop: function(event, ui) {
            if (ui.item.hasClass("elemtxt")) {
                ui.item.replaceWith('<div class="element element-txt">This text box has been added!</div>');
            }
        }
    });
    $(".element").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all");
});

Возникла пара проблем:

1. Событие сброса (что вы указываете в своем вопросе) не запускался, потому что вы не принимали нужный контент.
2. Если у вас есть оба .sortable и .droppable ] вы заканчиваете запуском странных двойных событий. В любом случае в этом нет необходимости, поскольку вы можете эффективно получить событие drop из событий sortable, учитывая, что вы связали его с перетаскиваемым.

Еще одно замечание: было бы лучше использовать receive [sortable]. 118464] вместо события stop (так как stop запускается каждый раз, когда останавливается любая сортировка и receive специально запускается, когда вы помещаете новый элемент в список сортировки), но он не работает должным образом, потому что элемент еще не был добавлен в сортируемый список, поэтому вы не в состоянии изменить это в этот момент. Он работает нормально при остановке просто потому, что ни один из других сортируемых элементов не имеет класса elemtxt .