<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>dropable.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">--> <mce:script type="text/javascript" src="../../jquery-1.4.4.min.js" mce_src="jquery-1.4.4.min.js"></mce:script> <mce:script type="text/javascript" src="../../jquery-ui-1.8.9.custom.min.js" mce_src="jquery-ui-1.8.9.custom.min.js"></mce:script></head> <body> This is my HTML page. <br> <div id="drag" class="ui-widget-content"> drag me </div> <div id="drop" class="ui-widget-header"> 1 2 3 <p> drop item to here </p> 4 5 6 </div> <mce:script type="text/javascript"><!-- $(function(){ $("#drag").draggable(); $("#drop").droppable({ drop:function(event,ui){ //event and ui can be ignored $(this).find("p").html("you made it"); } }); }); // --></mce:script> </body> </html>
drop:function(event,ui){...}
其实如果不需要对event,ui两个参数控制的话，可以改写为
drop:function(){...}
$(this).find("p")
这种在元素内找子元素的方法我还是第一次用到
