CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
msqar
msqar

Reputation: 3020

jQuery UI tolerance issue with hoverClass

i just made this example in jsFiddle for you to understand the issue I'm trying to solve. I got a draggable box and 3 different areas that are snapped to each-other.

When I start dragging up to put the red box into header, whenever 1px is inside header, header is getting the hoverClass, which is fine... but content shouldn't be getting the hoverClass, only header. Same applies backwards.

Is there a way to apply the hoverClass to only one area at a time? And not all the areas that you're over?

I don't want this to happen:

Droppable

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

And the JSFiddle

http://jsfiddle.net/5nbjqojn/

Don't know if I explained myself properly.

Thanks in advance.

Upvotes: 0

Views: 70

Answers (1)

Amin Jafari
Amin Jafari

Reputation: 7207

this is a workaround, may not be the best, but it gives you the desired result: 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');
        }
    }
});

Upvotes: 2

Related Questions