Hi All. I have a draggable related question. What I am trying to do is to have a horizontal band of images in a page (spans the entire doc width). This band is supposed to be draggable since I have way more images than can be drawn in the window. However I would like to restrict the drag so that of the first image is visible I want to disallow dragging right and if the last image is visible I want to disallow dragging left. I know what the stop conditions are given a ui object, basically is ui.position.left>0 stop and similarly if ui.position.left + width of band < window_width - scrollbar stop (a bit naive but will work for now). However I seem to be unable to cancel the drag. I have tried messing with the layout and containment option for draggable to no avail. I have included a test page that demonstrates what I have right now. Any help would be greatly appreciated. Thanks. AM <html> <head> <script type="text/javascript" src="scripts/jquery-latest.js"></ script> <script type="text/javascript" src="scripts/jquery.ui.core.draggable. 1.6rc1.js"></script> <style type="text/css"> .fixed-container { clear: both; margin: 1em; overflow: hidden; } .images { white-space: nowrap; } </style> <script type="text/javascript"> jQuery( function($) { $("#images").draggable({"axis": "x"}); }); </script> </head> <body> <div class="fixed-container" id="fixed_container"> <div class="images" id="images"> <img src="http://imgs.xkcd.com/comics/turing_test.png"></img> <img src="http://imgs.xkcd.com/comics/turing_test.png"></img> <img src="http://imgs.xkcd.com/comics/turing_test.png"></img> <img src="http://imgs.xkcd.com/comics/turing_test.png"></img> <img src="http://imgs.xkcd.com/comics/turing_test.png"></img> <img src="http://imgs.xkcd.com/comics/turing_test.png"></img> <img src="http://imgs.xkcd.com/comics/turing_test.png"></img> <img src="http://imgs.xkcd.com/comics/turing_test.png"></img> </div> </div> </body> </html>