拖动父div但只接受drop如果子元素在正确的位置

Question

我有一个可拖动的父元素（冰淇淋包装），它比可放置的（牙齿）大。所以我把另一个绝对定位的子元素放在父元素中，这个元素相当小（红色方块）。我想要实现的目标如下：

• 冰淇淋必须是一个可拖动的，红色标记将不可见
• 红色方块也应该在拖动冰淇淋时移动
只有当红色方块位于任何黑色标记的div（droppable's）内时，
• 火灾“掉落”事件，而不仅仅是冰淇淋的一部分

我已经尝试了一些“多拖”库，但没有一个按预期工作。我也尝试使用tolerance：pointer选项，但由于我们将拖动冰淇淋而不是红色方块，指针通常不会在标记的droppable内。

图片以便于理解：

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