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