javascript - hoverClass 的 jQuery UI 容忍问题

Question

我刚刚在 jsFiddle 中制作了这个示例，以便您了解我要解决的问题。我有一个可拖动的框和 3 个相互对齐的不同区域。

当我开始向上拖动以将红色框放入页眉中时，只要 1px 在页眉中，页眉就会获取 hoverClass，这很好......但是内容不应该得到 hoverClass，只有页眉。同样适用于倒退。

有没有办法一次只将 hoverClass 应用到一个区域？不是所有你去过的地方？

我不希望这种情况发生:

一些代码HTML

<div id="page-wrapper">
    <div id="header" class="global-region"></div>
    <div id="content" class="global-region"></div>
    <div id="footer" class="global-region"></div>    
</div>    
<div class="block"></div>

JS

$(".block").draggable();    
$(".global-region").droppable({
    hoverClass: "hoverArea",
    tolerance: "touch",
    revert: true
});

CSS

body {
    margin: 0 auto;
    background-color: #eee;
}    
#page-wrapper {
    width: 100%;
    display: block;
    margin: 0 auto;
}    
#header {
    width: 500px;
    height: 100px;
    background-color: white;
    border: 1px dashed #ddd;
}    
#content {
    width: 500px;
    height: 300px;
    background-color: white;
    border-left: 1px dashed #ddd;
    border-right: 1px dashed #ddd;
}    
#footer {
    width: 500px;
    height: 100px;
    background-color: white;
    border: 1px dashed #ddd;
}    
.block {
    height: 100px;
    width: 100px;
    background-color: red;
    position: absolute;
    z-index: 100;
    top: 150px;
    left: 50px;
}    
.hoverArea {
    -webkit-box-shadow:inset 0px 0px 0px 2px #f00;
    -moz-box-shadow:inset 0px 0px 0px 2px #f00;
    box-shadow:inset 0px 0px 0px 2px #f00;
}

还有 JSFiddle

http://jsfiddle.net/5nbjqojn/

不知道我解释的对不对。

提前致谢。

Answer 1

这是一种解决方法，可能不是最好的，但它可以为您提供所需的结果: DEMO

$(".block").draggable();

$(".global-region").droppable({
    hoverClass: "hoverArea",
    tolerance: "touch",
    revert: true,
    drop: function(event, ui) {
        console.log('hi');
    },
    over: function(event, ui) {
        console.log('im hovering!!');
        $('.hoverArea').not(this).removeClass('hoverArea');
    },
    out: function(event, ui){
        if($(this).attr('id')!='content'){
            $('.global-region').eq(1).addClass('hoverArea');
        }
    }
});