CODEWITHSUNDEEP
javascriptjqueryjquery-ui
raisyn
raisyn

Reputation: 4574

Change JQuery droppable over behavior

Please see my source code at: http://jsfiddle.net/rAmSG/9/

The blue item should be dropped at an of the other 3 divs. This already works correctly. But I want to have a effect when the blue item is over one of the other divs (and the mouse is not released yet). The corresponing div should be colored grey (but only the smallest div, like the drop behavior).

Does anyone have a suggestion how to do this? Also I'm not able to get the 'hoverClass' settings working, any solutions for this too?

Thanks in advance!

Upvotes: 1

Views: 2838

Answers (2)

Frédéric Hamidi
Frédéric Hamidi

Reputation: 262939

You have problems with hoverClass because you're defining a background color for the droppable elements using an id selector, and that rule takes precedence even when you apply the dark class to the elements.

You can increase the .dark rule's priority with !important:

.dark {
    background-color: #333333 !important;
}

Then you can use hoverClass as expected:

$("#dropDiv1, #dropDiv2, #dropDiv3").droppable({
    greedy: true,
    drop: function() {
        $(this).css("background-color", "black");    
    },
    tolerance: "pointer",
    hoverClass: "dark"
});

You will find an updated fiddle here.

Upvotes: 2

Rodolphe
Rodolphe

Reputation: 1731

Add an out function:

$(document).ready(function(e) {
    $("#dragDiv").draggable();
    $("#dropDiv1, #dropDiv2 , #dropDiv3").droppable({
        greedy: true,
        drop: function()
        {
            $(this).css("background-color", "black");    
        },
        over: function()
        {
            $(this).css("background-color", "#333");
        },
        out: function()
        {
            $(this).css("background-color", "");
        },

        tolerance: "pointer"
    });
});

This will reset the background-color when the blue square leaves a rectangle.

Upvotes: 2

Related Questions