jQuery 可放置鼠标悬停传播

Question

我有两个 Div，它们都定义为可放置项目并且可以接受相同的项目。 两个 Div 都是绝对定位的，有时它们可​​以彼此重叠，在这种情况下，当我将一个元素拖动到顶部 Div 上时，似乎隐藏的 Div 接受了拖放。

我尝试将 event.stopPropagation() 放入 Div mouseover、mouseleave、droppable.over 事件中，但它什么也没做。

相关代码为:

$('.myDraggable').draggable({
    start: function (event, ui) { },
    distance: 20,
    revert: 'invalid',
    appendTo: '.myStage',
    scroll: false,
    helper: 'clone',
    zIndex: 999999
});

$('.myDroppable').droppable({
    over: function (event, ui) { },
    drop: function (event, ui) { },
    activate: function (event, ui) { },
    deactivate: function (event, ui) { },
    accept: '.myDraggable'
});

Answer 1

我可以针对您的问题提出一些解决方法。当鼠标悬停在元素上时，使用“live”或“delegate”使元素可拖动。下面的代码不是 D&D，但您可以通过将添加 css 类替换为使对象可拖动来轻松将其移植到您的项目中。

   <div id='mouse-over-wrapper'>
    <div id='div1' style="position:absolute; width:500px; height:500px; top:100px; left:50px; z-index:100;">
    </div>
    <div id='div2' style="position:absolute; width:500px; height:500px; top:300px; left:250px; z-index:100;">
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#mouse-over-wrapper div').live('mouseover', function () {
            $(this).addClass('blue');
        });
        $('#mouse-over-wrapper div').live('mouseout', function () {
            $(this).removeClass('blue');
        });
    });
</script>