jQuery UI是一个jQuery插件库，它提供了大量UI组件和效果，其中之一就是draggable组件。以下是jquery.ui.draggable的完整攻略。

标题

jquery.ui.draggable中文文档

介绍

jquery.ui.draggable是一个拖拽库，能够将指定元素变成可拖拽的元素。它支持以下功能：

• 鼠标拖拽
• 触摸屏拖拽
• 带有限制条件的拖拽
• 带有调整大小的拖拽
• 多元素同时拖拽

使用方法

HTML

<div class="box">这是一个可拖拽的元素</div>

JavaScript

$( ".box" ).draggable();

在代码中，首先调用.draggable()方法将指定的元素变成可拖拽的元素。 在这个例子中，选择器 ".box" 指定了一个名为 box 的 div 元素。

示例

1. 简单拖拽

<div class="box">这是一个可拖拽的元素</div>

$( ".box" ).draggable();

在这个示例中，元素div.box被选中并且使用draggable方法初始化。现在，可以通过鼠标拖拽这个元素。

2. 限制拖拽范围

<div class="box">这是一个可拖拽的元素</div>

$( ".box" ).draggable({ containment: "#containment-wrapper" });

在这个示例中，选中的元素是div.box。使用containment选项，可以限制元素的拖拽范围。它可以是一个CSS选择器，也可以是一个jQuery对象，限制元素只能在指定的区域内拖拽。 containment-wrapper是一个HTML元素，可以使用一个CSS选择器或是一个DOM元素来指定。

结论

以上是jquery.ui.draggable的完整攻略，它提供了很多功能，包括HTML、JavaScript和示例。使用这个插件，可以轻松将指定元素变成可拖拽的。