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

时间:2017-08-07 12:39:21

标签: jquery jquery-ui-draggable jquery-ui-droppable

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

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

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

图片以便于理解: enter image description here

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

1 个答案:

答案 0 :(得分:0)

使用此代码

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