Cambiar el comportamiento desplegable de JQuery

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?

Gracias de antemano!

preguntado el 08 de noviembre de 11 a las 16:11

2 Respuestas

Añadir un out función:

$(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.

respondido 08 nov., 11:21

You're welcome. But also have a look at Frédéric Hamidi's solution which is more elegant if you only need a "colorized" feedback. - Rodolphe

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.

Puede aumentar el .dark rule's priority with !important:

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

Entonces puedes usar hoverClass como se esperaba:

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

You will find an updated fiddle aquí.

respondido 08 nov., 11:21

Thank you were much. I just need a little effect at mouseover. Can be easily done by css. So your solution is a bit more elegant as Rodolphe said. - pasas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.