拖拽父div，但只接受drop，如果子元素在正確的位置

Question

我有一個可拖拽的父元素（冰淇淋包裝），它比可拖拽的元素（牙齒）大。所以我把另一個絕對定位的子元素放在父母裏面，這個元素很小（紅色方塊）。我想實現如下：

• 冰淇淋有可能成爲一個可拖動，紅色標記將不可見拖冰淇淋時
• 紅方也應該將
• 火「降「唯一的事件時，紅場在裏面任何的黑色標記的div（可棄的），不僅是冰淇淋

我已經嘗試了一些的一部分‘多拖’庫，但沒有人擔任預期。我也嘗試使用寬容：指針選項，但由於我們將拖動冰淇淋而不是紅色方塊，因此指針通常不會位於標記的可拖拽內部。

圖像更容易理解：

HTML部分：

<div class="sladoled-wrapper draggable"> 
    <img src="img/sladoled.png" class="img-sladoled draggable"> 
    <div class="pointer draggable"></div> 
</div> 

JS部分：

$(function() { 
    $(".draggable").draggable({ 
     revert: true 
    }); 
    $(".droppable").droppable({ 
     tolerance: 'pointer', 
     drop: function(event, ui) { 
      $(this).addClass("dropped"); 
     } 
    }); 
}); 

Answer 1

使用此代碼

$(function() { 
    $(".draggable").draggable({ 
     revert : function(event, ui) { 
      // on older version of jQuery use "draggable" 
      // $(this).data("draggable") 
      // on 2.x versions of jQuery use "ui-draggable" 
      // $(this).data("ui-draggable") 
      $(this).data("uiDraggable").originalPosition = { 
       top : 0, 
       left : 0 
      }; 
      // return boolean 
      return !event; 
      // that evaluate like this: 
      // return event !== false ? false : true; 
     } 
    }); 
    $(".droppable").droppable({ 
     tolerance: 'pointer', 
     drop: function(event, ui) { 
      $(this).addClass("dropped"); 
     } 
    }); 
});