draggable accuracy in jQuery

Hi: I am running of a problem when I am trying to make a special drag drop in JQuery.In few words.

from the link above you can see that when we drag the boxes to the dropping areas (the left red boxes) they ( I mean the droppable boxes) does not seem to be activated unless the dragged box reach the center of the target ( the droppable box) element which is seem to be a problem in the JQuery itself !?

Another thing, which is there is no control over the draggables element as they hover upon the droppables, for example, Can I make the draggables ( not 开发者_开发问答the droppable ) become small AS THEY ENTER THE DROPPABLE AREAS !

Any help, ideas, or clues will be highly appreciated. Many thanks in advance.

jQuery droppable has an option 'tolerance' that controls this. It has 4 settings: fit, intersect, pointer, touch. From your description, it looks like you want 'touch'- the draggable is considered overlapping as soon as it touches the droppable.

$('.drop_area').droppable(
    { tolerance: 'touch' }
);