[jQuery] Tolerance question

[miki]

I have to make a "puzzle game". here it is the html:

<div id="dropContent2"></div>

<div id="dropContent">
        <img id="box1" class="handle" src="./i/01.jpg" alt="" />
        <img id="box2" class="handle" src="./i/02.jpg" alt="" />
        <img id="box3" class="handle" src="./i/03.jpg" alt="" />
        <img id="box4" class="handle" src="./i/04.jpg" alt="" />
        <img id="box5" class="handle" src="./i/05.jpg" alt="" />
</div>

and js:

$(".handle").draggable({
         refreshPositions: "true",
         snap: ".handle",
         snapMode:"all",
         revert:"invalid" ,
         zIndex:1000,
         opacity: 0.40
});
$("#dropContent").droppable({
        accept: ".handle",
        greedy:"true",
        tolerance:"touch",
        drop: function(ev, ui) { ui.draggable.animate({"left":
"0","top":"0"}, "slow"); }
 });
$("#dropContent2").droppable({
        accept: ".handle",
        greedy:"true",
        tolerance:"fit" });
$(".handle").droppable({
        accept: ".handle",
        greedy:"true",
        tolerance:"intersect",
        drop: function(ev, ui) {        ui.draggable.animate({"left":
"0","top":"0"}, "slow");},
        over: function(ev, ui) { $(this).css({ "border":"2px solid red" }); }
});


I want that all img inside div dropContent can be only droppable over
div dropContent2.
The main clue is that i dont want the images overlap.

I've tried making every image a droppable zone and when an image is
over another image, dragged obj position will be resetted.
But i have some trouble with tolerance values..
with "intersect" the over function starts when the draggable img is
almost inside the element
with "touch" the over function starts when i touch other img (this is
not my case, because a want the images snap themselves but not
overlap).
There is some way to change the "intersect" droppable zone?

thanks for support and sorry for bad english.