其中不能使用 $("#aaa").draggable({ stop:function(event,ui){ alert(11); } }); 只能使用下面例子中的bind方法 $("#aaa").bind('dragstop',function(event,ui){ alert(11); }); <!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=gb2312" /> <title>jquery拼图</title> <mce:script language="javascript" src="jquery.ui/jquery-1.2.4a.js" mce_src="jquery.ui/jquery-1.2.4a.js"></mce:script> <mce:script language="javascript" src="jquery.ui/ui.base.min.js" mce_src="jquery.ui/ui.base.min.js"></mce:script> <mce:script language="javascript" src="jquery.ui/ui.draggable.min.js" mce_src="jquery.ui/ui.draggable.min.js"></mce:script> <mce:script language="javascript"><!-- var x //取得白方块div的left值 var y var sleft = new Array(); //1到8,每个div的移动前的left值 var sstop = new Array(); //1到8,每个div的移动前的top值 $(function(){ start(); function start(){ for(var i=1;i<9;i++){ x=$("#f9").position().left; y=$("#f9").position().top; sleft[i] = $("div").eq(i).position().left var posx = sleft[i]-x; //取得第i个div与白方块#f9的left差值 ,有正负 var absposx = Math.abs(posx); //取得第i个div与白方块#f9的left差值的绝对值 sstop[i] = $("div").eq(i).position().top var posy = sstop[i] -y; var absposy = Math.abs(posy); if(absposx==200 && absposy == 0){ //判断该移动的轴,x或y轴,并调用stop函数 $("div").eq(i).draggable("enable"); $("div").eq(i).draggable({axis:"x",containment:"parent",opacity:0.6,cursor:"move",snap: true}); $("div").eq(i).bind('dragstop', function(event, ui) { //绑定draggable的stop函数 var index=$("div").index(this); var eleft = $(this).position().left; //取出该div的最终left值,赋值给eleft $(this).animate({left:x,opacity:"0.6"},function(){ x=sleft[index]; //x的值已经改变 $(this).css("opacity","1"); $("#f9").css("left",x); $("div").draggable("disable"); $("div").unbind('dragstop'); //取消监听事件,重要★★★ start(); }); }); } else if(absposx==0 && absposy==200){ //y坐标移动 $("div").eq(i).draggable("enable"); $("div").eq(i).draggable({axis:"y",containment:"parent",opacity:0.6,cursor:"move",snap: true }); $("div").eq(i).bind('dragstop', function(event, ui){ var index=$("div").index(this); //i不能作为参数传入该函数,所以定义个index表示序号 var etop = $(this).position().top; //移动后的top值 $(this).animate({top:y,opacity:"0.6"},function(){ y=sstop[index] $(this).css("opacity","1"); $("#f9").css("top",y); $("div").draggable("disable"); $("div").unbind('dragstop'); start(); }); }); } } } }); // --></mce:script> <mce:style><!-- h1{ font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif; color: #333; font-weight:100; font-size:20px;} .block{ width:200px; height:200px; float:left;font-size:36px; text-align:center; line-height:200px; color:#FFFFFF; position:absolute;} #layout{ width:600px; height:600px; position:relative; } #f1{ background:#3399FF; top:0px; left:0px;} #f2{ background:#009999; top:0px; left:200px;} #f3{ background:#FF9933; top:0px; left:400px;} #f4{ background:#CC3333; top:200px; left:0px;} #f5{ background:#000000; top:200px; left:200px;} #f6{ background:#FF9966; top:200px; left:400px;} #f7{ background:#660099; top:400px; left:0px;} #f8{ background:#FFFF33; top:400px; left:200px;} #f9{ background:#FFFFFF; top:400px; left:400px; z-index:-1} #sortable{ background:#99FFFF; width:300px; height:300px;} --></mce:style><style mce_bogus="1">h1{ font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif; color: #333; font-weight:100; font-size:20px;} .block{ width:200px; height:200px; float:left;font-size:36px; text-align:center; line-height:200px; color:#FFFFFF; position:absolute;} #layout{ width:600px; height:600px; position:relative; } #f1{ background:#3399FF; top:0px; left:0px;} #f2{ background:#009999; top:0px; left:200px;} #f3{ background:#FF9933; top:0px; left:400px;} #f4{ background:#CC3333; top:200px; left:0px;} #f5{ background:#000000; top:200px; left:200px;} #f6{ background:#FF9966; top:200px; left:400px;} #f7{ background:#660099; top:400px; left:0px;} #f8{ background:#FFFF33; top:400px; left:200px;} #f9{ background:#FFFFFF; top:400px; left:400px; z-index:-1} #sortable{ background:#99FFFF; width:300px; height:300px;}</style> </head> <body> <h1>拼图 -- iDamaG</h1> <div id="layout"> <div class="block" id="f1">1</div> <div class="block" id="f2">3</div> <div class="block" id="f3">5</div> <div class="block" id="f4">7</div> <div class="block" id="f5">6</div> <div class="block" id="f6">2</div> <div class="block" id="f7">4</div> <div class="block" id="f8">8</div> <div class="block" id="f9"></div></div> </body> </html>