How to check if droppable area is reached with the draggable element?

Question

When i'm dragging the draggable element, and its over the droppable area, i want to add a new class to the draggable element so i can change its style using CSS. This is what i got so far:

<aside>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</aside>
<section></section>

$(document).ready(function(){
	
	//Test 
    $("aside div").draggable({
		revert: "invalid",
		containment: "document",
		helper: "clone",
		cursor: "move"
	});
 
    $('section').droppable({
		accept: "aside div",
		activeClass: "ui-state-highlight",
		drop: function( event, ui ) {
			//valami
			alert('lol');
		}
    });
	
});

aside {
    float:left;
    width:200px;
}

aside div {
    width:200px;
    height:100px;
    background:red;
    margin:0 0 10px 0;
}

section {
    float:right;
    width:400px;
    height:320px;
    background:green;
}

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<aside>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</aside>
<section></section>

Answer 1

From jQueryUi Documentation http://api.jqueryui.com/droppable/#event-over

over( event, ui )Type: dropover

Triggered when an accepted draggable is dragged over the droppable (based on thetolerance option).

You might be interested in its dual also

out( event, ui )Type: dropout

Triggered when an accepted draggable is dragged out of the droppable (based on thetolerance option).