拖曳插件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轴拖曳。
draggable()方法将元素也拖曳插件相绑定。draggable()方法时，通过axis属性设置移动时的坐标方向，该属性值为x时，表示只能沿X轴方向拖曳，为y时，表示只能沿Y轴方向拖曳。请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报