可拖動的被丟棄的位置不同於可丟棄的

Question

我正在創建一個拖放燭臺。我有一個div id與droppable，但是當我拖動draggable div的可拖動寄存器，當可拖動div不在正確的位置。

可投放被註冊時的蠟燭處於位置如可以在圖像中可見。這裏是一個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(); 

     } 
    }); 
}); 

難道這有位置做：絕對或有另一種explination這樣做呢？

Answer 1

，而不是使用在html嵌套div可以使用draggable插件css和handle財產。使用此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; 
}