jQuery 可放置鼠标悬停传播

发布于 12-28 20:44 字数 658 浏览 5 评论 0原文

我有两个 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'
});

原文

I have two Div's, both of them defined as droppable item and can accept the same item.
both of the Div's are positioned absolute and sometime they can be one over each other, in this case, when i'm dragging an element over the top Div, it seems that the hidden Div accepts the drop.

I tried to put event.stopPropagation() in the Div mouseover, mouseleave, droppable.over events but it does nothing..

The relevant code is:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最近可好2025-01-04 20:44:30

我可以针对您的问题提出一些解决方法。当鼠标悬停在元素上时，使用“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>

I can propose some workaround for your problem. Make elements draggable when mouse is over the element using 'live' or 'delegate'. The code below is not D&D but you can easly port it to you project by replacing adding css class with making object draggable.

   <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>

回复收藏 0 原文

~没有更多了~