Javascript 带有hoverClass的jQuery UI容差问题

我只是在JSFIDLE中做了这个例子，让您理解我试图解决的问题。 我得到了一个可拖动的盒子和3个不同的区域，它们相互对齐

当我开始向上拖动以将红色框放入标题中时，只要1px在标题中，标题就会得到hoverClass，这很好。。。但是内容不应该是hoverClass，而应该是header。这同样适用于向后

有没有一种方法可以一次只将hoverClass应用于一个区域？而不是所有你去过的地方

我不希望这种情况发生：

一些代码 HTML

CSS

还有JSFIDLE

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

---

提前感谢。

这是一个解决方法，可能不是最好的，但它会给您提供所需的结果：

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

---

所有的区域都必须有相同的类：（你刚刚从内容中删除了它哈哈：这完全可以！哈哈…谢谢伙计：）我会勾选这个作为答案

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

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

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