views:

45

answers:

1

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.

+2  A: 

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' }
);
Brian Pan
Looks like the right solution to me. Basher, you can also use the "over" event to perform some actions when a draggable is hovering over a droppable element. In this case, you could use it to add a height/width to the draggable to reduce its size, then use the out event to set the size back again.
El Yobo