Hello, The question is why drag-option doesn't work ( options.drag = function (event,info) { alert('drag'); } )? Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Scroll element</title> <style type="text/css"> .scrollable { overflow:hidden; height:200px; width:350px; margin:100px auto; } .bloc { margin:5px auto; font-size:12px; } .scr_cnt_handle { float:left; height:100%; border:1px solid #000; } .scr_body { float:left; overflow:hidden; height:200px; width:300px; } .ctr_handle { width:20px; height:40px; background-color:#006699; } </style> <script src="jquery-1.3.1.min.js" type="text/javascript" language="javascript"></script> <script src="ui.core.js" type="text/javascript" language="javascript"></script> <script src="ui.draggable.js" type="text/javascript" language="javascript"></script> <script type="text/javascript" language="javascript"> $(function(){ var options = {}; options.containment = 'parent'; options.axis = 'y'; options.drag = function(event,info) { alert('drag'); } $('.ctr_handle').draggable(options); }); </script> </head> <body> <div class="scrollable"> <div class="scr_body"> <div class="bloc"> <img src="FooterRevision.png" width="60" height="60" style="float:left;" /> Text some here text! Text some here text! Text some here text! Text some here text! </div> <div class="bloc"> <img src="InteriorPage1.png" width="60" height="60" style="float:left;" /> Text some here text! Text some here text! Text some here text! Text some here text! </div> <div class="bloc"> <img src="InteriorPage2.png" width="60" height="60" style="float:left;" /> Text some here text! Text some here text! Text some here text! Text some here text! </div> <div class="bloc"> <img src="FooterRevision.png" width="60" height="60" style="float:left;" /> Text some here text! Text some here text! Text some here text! Text some here text! </div> </div> <div class="scr_cnt_handle"> <div class="ctr_handle"></div> </div> <div style="clear:both;"></div> </div> </body> </html>