[jQuery] Re: Tolerance question

[Karl Swedberg]

Hi miki,

Would you mind posting this question to the jquery-ui google group if  
you haven't done so already? That group is dedicated to questions such  
as yours that are specifically related to jQuery UI.

http://groups.google.com/group/jquery-ui/


Thanks,

--Karl

____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Sep 29, 2008, at 4:24 AM, miki wrote:


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.