jquery UI 跟随学习笔记——拖拽（Draggable）

引言

这周暂时没有任务下达，所以老大给我的任务就是熟悉jquery相关插件，我就先选择了jquery UI 插件，以及jquery库学习。

我用了两天的时候熟悉Interactions模块中的Draggable功能，并跟随练习，写这篇博文就是想记录下自己的心得体会。

正文：Draggable(拖拽)

1、默认配置：就是简单的一行代码：$( "#目标元素Id" ).draggable();

<title>jqeruy UI 拖拽练习--默认配置</title>
<!--导入jquery插件-->
<script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>
<!--导入jqueryUI插件-->
<script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

<!--自写脚本-->
<script type="text/javascript" language="javascript">
   //在页面加载完之后加载jquery
   $().ready(function(e) {
      //拖拽函数
      $('#draggable').draggable();
});
</script>
<!--自写脚本-->
<style type="text/css">
  #draggable
  {
      width:150px;
      height:150px;
  }
</style>
</head>

<body>
<div id="draggable" class="ui-widget-content">
   <p>您可以四处随便拖拽我！</p>
</div>
</body>

效果是可以四处随便拖拽