Please see CSS jQuery methods:
http://api.jquery.com/category/css/[
^].
Most usually, such things are done using
.addClass()/.removeClass
, or, alternatively,
.toggleClass()
:
http://api.jquery.com/addClass/[
^],
http://api.jquery.com/removeClass/[
^],
http://api.jquery.com/toggleClass/[
^].
[EDIT]
As to handling the events, I'm not quite sure how you determine the drop zone, check that the moving object is in the zone and what you want to do when you drop in required zone or outsize of if. The simplest variant for the change in styles would be the location of the mouse pointer. Will that satisfy your criteria? If so, you can handle the separate group of events for the drop-zone object only. The best way to do it would be handling
.hover()
:
dropZone =
droppable = $('#droppable');
dropZone.hover(function(){
function() {
this.toggleClass( );
droppable.toggleClass( );
},
function() {
this.toggleClass( );
droppable.toggleClass( );
}
})
This way, you handle
droppable
separately, and moving in and out of the drop zone separately. I don't see why this simple schema may not work. If you need some more complex criteria, the code would be more complex, as you would need to take into account position of mouse and sizes of the two elements…
—SA