3-1 拖曳插件——draggable
本节编程练习不计算学习进度，请电脑登录imooc.com操作

拖曳插件——draggable

拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：

$(selector). draggable({options})

options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。

例如，在页面中的<div>元素中添加两个子类<div>，通过与拖曳插件绑定，这两个子类<div>元素只能在外层的父<div>元素中任意拖曳，如下图所示：

在浏览器中显示的效果：

从图中可以看出，由于使用jQuery UI插件draggable绑定了两个子类<div>元素，并将配置对象的“containment”属性值设为“parent”，因此，这两个子类<div>元素只能在外层的父框中实现任意拖曳。

任务

我来试试，亲自调用jQuery UI插件draggable，使元素指定的坐标方向拖曳。

在下列代码的第18、19行，调用draggable插件的draggable()方法，分别使id号为“x”和“y”的<div>元素只能沿X轴和Y轴拖曳。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>拖曳插件</title>
  5.         <link href="style.css" rel="stylesheet" type="text/css" />
  6.         <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
  7.         <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
  8.     </head>
  9.  
  10.     <body>
  11.         <div id="divtest">
  12.             <div id="x" class="drag">沿x轴拖拽</div>
  13.             <div id="y" class="drag">沿y轴拖拽</div>
  14.         </div>
  15.  
  16.         <script type="text/javascript">
  17.             $(function () {
  18.                 ?
  19.                 ?
  20.             });
  21.         </script>
  22.     </body>
  23. </html>
  1. #divtest
  2. {
  3.     width: 282px;
  4.     border: solid 1px #ccc;
  5. }
  6. .drag
  7. {
  8.     border: solid 1px #fff;
  9.     background-color: Blue;
  10.     color:#fff;
  11.     cursor: move;
  12.     width: 35px;
  13.     padding: 20px;
  14.     text-align: center;
  15. }
下一节