W jaki sposób ograniczyć przeciąganie elementu do obszaru kontenera? Głowię się nad tym już trochę czasu. Otóż mam taki układ:
<div id="Kontener">
<div id="Costam">
</div>
<div id="Costam2">
</div>
<div id="Costam3">
<img id="ItemA" src="itema.png" />
<img id="ItemB" src="itemb.png" />
<img id="ItemC" src="itemc.png" />
</div>
</div>
Zasadniczo wygląda to tak, że w kontenerze są 3 divy, z czego "Costam3" zawiera szereg obrazków, które mają być "draggable" i ustawiam je tak:
new Draggable('ItemA', { revert: true, ghosting: true });
new Draggable('ItemB', { revert: true, ghosting: true });
new Draggable('ItemC', { revert: true, ghosting: true });
Wszystko fajnie działa, tylko chciałbym ograniczyć możliwość przeciągnięcia obrazka poza kontener. Próbowałem z opcją "snap" (w przykładach tak jest robione ograniczanie), ale... jest to trochę robota pod górkę - gdyż trzeba wyliczać za każdym razem ile pikseli dany obrazek może być przeciągnięty w każdą ze stron i dla każdego obrazka będą to różne wartości gdyż w funkcji snap x i y podawane jest o ile pikseli obrazek został przesunięty od oryginalnej pozycji (obrazki są "float: left" i układają się w "siatkę" o rozmiarze 5x12 - stąd drugi wiersz będzie miał inny zakres "y", a każda kolumna inny zakres "x").
W mintAjax można ustawić ograniczenie poprzez funkcję bbox, ale co bym nie zrobił to ogranicza mi tylko i wyłącznie do "Costam3" i nie jest możliwe przeciągnięcie elementu nad "Costam1" lub "Costam2".