Adding a highlight animation when hovering a sortable object over a droppable object JQUERY

Question

I have a list of objects called projects that are sortable, and a list of objects called categories that are droppable. I need to somehow make it so that when you click on a sortable project, and drag it down so it is hovering over a droppable category, the category that the project is going to go into is highlighted, or outlined or some other kind of animation.

I am sure that it could be done by something as simple as an add-class-on-hover-over-droppable-object type function, but I don't know how it is supposed to be setup.

Looking through some of the jQuery documentation, I found out that for a droppable object, you can set an over: function(), attribute, but I couldn't get it to work...

What do I need to do to make this work?

Thanks!

Answer 1

Use the hoverClass option. One of the demos for jQuery droppable uses it (click on view source to view how it works).

$("#something").droppable({
    hoverClass: 'someClassName'
});