Question

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

我试图在Div鼠标悬停，mouseleave，droppable.over事件中放置event.stopPropagation（），但它什么也没做。

相关代码是：

$('.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＆amp; 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>

jQuery可放置鼠标悬停传播

1 个答案: