Segítenél megoldani ezt a php, jquery ui problémát? (bővebben lent)

Namost lenne egy kis gondom.Tulajdonképpen egy RPGhez hasonló inventoryt akarok létrehozni amiben ugyebár lene egy nagy div az inventory és a kis draggeble divek az itemek.Nagyrészt megvan viszont van egy orbitális bug ami óta már elég rég óta kutatok de sehogy sem tudom megoldani.Ahhoz hogy az itemek benn legyenek mindig az inventoryba ha rajta kivül huzzzák vissza kell menjenek a helyükre.Ezt azért nem revert functionnal oldottam meg mert arról tudni kell hogy ha a draggablenek gridet is rakunk a kettő együtt bugol vagyis a draggable visszarevertezés után 1-2 pixelt téved a visszarakásban.(ez egy ismert bug a jquery uiban).Mivel ez hibás ezért én magam irtam meg a programkódot ami ezt összehozza nekem.Annyiból ál hogy kivannak számolva az inventory sarkai és ehhez vannak viszonyitva az itemek is de vmiért el vannak csuszva.Olyan értelembe hogy az itemek kezdőpontja vagyis teteje mindegyiknek ugyanott van méis ha két itemet benyomok az inventoryba nem igy reagálnak.Az egyik pont visszaugrik az inventory tetejétől mig a másik ugy érzékeli hogy az inventory teteje sokkal alatta van.Lehet hogy ez igy nem érthető számotokra akko értékelném ha vmi chatprogramba megbeszélhetnénk de talán ennyi info is elég.

Íme a kódja(nagyjábol):

<div style="position:relative;width:700px;height:400px;background-color:yellow;" class="ui-widget-header" id="droppable" bgcolor="yellow">

<?php

$magas = 40;

$szeles = 70;

$futo = 0;

$lol = 0;

$item = 0;

$megadopont = 0;

while($futo < $magas)

{

$lol = 0;

if($item != $itemcount)

{

$itemsajat = 0;

while($vanetabla = mysql_fetch_array($vane))

{

$item = mysql_query("SELECT * FROM item WHERE id = ".$vanetabla["itemid"]."");

$itemtabla = mysql_fetch_array($item);

?>

<div id="draggable<?php print $itemsajat; ?>" style="background-image: url(<?php print $itemtabla["kep"]; ?>);height: <?php print $itemtabla["height"]; ?>px;width: <?php print $itemtabla["width"]; ?>px;top: <?php print $vanetabla["y"]; ?>px;left: <?php print $vanetabla["x"]; ?>px;" class="ui-widget-content">

</div>

<?php

?>

<script>

var xregi = <?php print $vanetabla["x"]; ?>;

var yregi = <?php print $vanetabla["y"]; ?>;

$(function()

{

$( "#draggable<?php print $itemsajat; ?>" ).draggable

({

grid: [8, 8],

stop: function(event, ui)

{

var xx = ui.position.left;

var yy = ui.position.top;

var error = 0;

if(xx < -313 || yy < 0 || xx > 320 || yy > 400)

{

ui.helper.animate({

left: xregi+"px",

top: yregi+"px"

});

error = 1;

}

if(error != 1)

{

xregi = xx;

yregi = yy;

$.ajax({

type : "POST",

url : "ajaxitempost.php",

data : {

x : xx,

y : yy,

kariid : <?php print $_GET["kariid"]; ?>,

itemid : <?php print $vanetabla["id"]; ?>,

save : 1,

}

});

}

},

});

$( "#droppable" ).droppable

({

activeClass: "ui-state-hover",

hoverClass: "ui-state-active",

drop: function( event, ui )

{

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

});

</script>

<?php

$itemsajat++;

}

}

$futo++;

$item = 1;

}

?>

</div>

A segítséget előre is köszönöm!!!:))