时间戳

首页 > 解决方案 > 如何在 jQuery 的可拖动元素中选择特定 ID

javascript - 如何在 jQuery 的可拖动元素中选择特定 ID

问题描述

我在这里有这个 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 的新手，所以如果之前有人问过这个问题，我深表歉意，但我无法将它变成一个合适的问题来查找重复项。

标签： javascriptjqueryhtml

解决方案

您可以通过自动传递给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
}

推荐阅读