draggable 被放置在与 droppable 不同的位置

【问题标题】：draggable is being dropped in different location than droppabledraggable 被放置在与 droppable 不同的位置
【发布时间】：2026-01-24 22:15:01
【问题描述】：

我正在创建一个拖放式烛台。我有一个 id 为 droppable 的 div，但是当我拖动可拖动的 div 时，当可拖动的 div 不在正确的位置时，droppable 注册。

当蜡烛处于图像中所示的位置时，可滴落被注册。这是codepen

相关代码

放在这里

<div id="lighting" class="ui-widget-content">
    <div id="shamash"></div>
    <div id="flame"></div>
</div>
$(function() {
    $("#lighting").draggable({ revert: "invalid" });
    $(".flame").hide();
    $("#droppable").droppable({
        drop: function(event, ui) {
            $(".flame").show();

        }
    });
});

这可能与 position: absolute 或对此有其他解释吗？

【问题讨论】：

你想达到什么目的？我无法解决问题
我希望在#droppable 中删除#lighting 时显示.flame

标签： jquery jquery-ui

【解决方案1】：

您可以使用css 和handle 插件的draggable 属性，而不是在html 中使用嵌套的div。使用这个fiddle:

JS：

$(function() {
    $("#flame").draggable({revert:"invalid",cursor: "move",handle:"#shamash" });
    $(".flame").hide();
    $("#droppable").droppable({
    greedy:true,
        drop: function(event, ui) {
            $(".flame").show();

        }
    });
});

HTML：

<div id="flame">
      <div id="shamash"></div>
    </div>

CSS：

#shamash {
    height: 60px;
    //right: 390px;
    //top: 240px;
    position: relative;
    background-color:white;
    right: 0px;
    top: 20px;
}

#flame {
    background-color: yellow;
    width: 15px;
    height: 20px;
    position: absolute;
    border-radius: 80px 80px 10px 10px;
    right: 390px;
    top: 220px;
    box-shadow: 0px 0px 2px 1px yellow;
}

【讨论】：