Как выбрать указанный c ID внутри перетаскиваемого элемента в jQuery

Question

У меня есть это HTML здесь:

<div class="dev draggableDevelopers" id="devCard<?= ++$index ?>">
    <p class="card-text" id="devCardText<?= $index ?>">
        <span id="devCardName"><?= $user->getUsername() ?></span>
        <button class="trashButton" id="trash<?= $index ?>" onclick="removeDeveloperFromSupport(<?= $index ?>)"><i class="fas fa-trash-alt"></i>trash</button>
    </p>
</div>

Это перетаскиваемые и сбрасываемые элементы определяются этим jQuery:

$('.draggableDevelopers').draggable( {
    containment: 'document',
    cursor: 'move',
    revert: true,
    stack: '.card'
} );

$('.droppableRotaSlot').droppable( {
        accept: '.draggableDevelopers',
        hoverClass: 'hovered',
        drop: handleDeveloperRotaDrop
    } );

Событие отбрасывания определяется :

function handleDeveloperRotaDrop(event, ui) {
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable('option', 'revert', false);
}

Что мне нужно сделать sh, так это получить содержимое id="devCardName" после удаления элемента. Возможно ли это, если да, то как? Я новичок в jQuery, поэтому я прошу прощения, если об этом уже спрашивали, но я не мог сформулировать это в правильном вопросе, чтобы найти дубликат.

Answer 1

Вы можете получить доступ к перетаскиваемому элементу, когда он сбрасывается через второй параметр, который автоматически передается вашему обратному вызову drop.

$('.droppableRotaSlot').droppable( {
    accept: '.draggableDevelopers',
    hoverClass: 'hovered',
    drop: handleDeveloperRotaDrop
});

function handleDeveloperRotaDrop(evt, ui) {
    //ui.draggable stores a reference to the draggable
    //additionally, ui.helper stores a reference to the 'helper' representing
    //the draggable during the drag
}