方法一:
方法二(建议采用方法二):
参考:
<!-- 首先在页头部分加入以下这行代码 -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!-- 加载jQuery-->
<script type="text/javascript">
google.load("jquery", "1.7.0");
google.load("jqueryui", "1.8.16");
</script>
方法二(建议采用方法二):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/black-tie/jquery-ui.css" type="text/css" media="all" />
例:
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/black-tie/jquery-ui.css" type="text/css" media="all" />
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</html>
参考:
https://developers.google.com/speed/libraries/devguide?hl=zh-CN
https://developers.google.com/loader/?hl=en (google.load)
http://stackoverflow.com/questions/820412/downloading-jquery-css-from-googles-cdn (jQueryUi CSS)