如何在 jQuery 中的可拖動元素中選擇特定 ID

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

drop 事件定義為：

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

我希望做的是在元素被刪除時獲取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
}