javascript - jQuery UI公差问题与hoverClass

我只是在jsFiddle中创建了此示例，以使您了解我要解决的问题。
我有一个可拖动的盒子和3个彼此紧贴的不同区域。

当我开始向上拖动以将红色框放入标头时，只要标头内包含1px，标头就会获得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/

不知道我是否正确地解释了自己。

提前致谢。

最佳答案

这是一种解决方法，可能不是最好的方法，但是它可以为您提供所需的结果：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');
        }
    }
});