jQuery.UI的Draggable(拖动)、Droppable（放置）功能组件参数、事件和方法说明文档
Draggable(拖动)
1、参数（Options）
| 选项 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| addClasses | Boolean | 如果设置为 false，将阻止 ui-draggable class 被添加。当在数百个元素上调用 .draggable() 时，这么设置有利于性能优化。 | true |
| appendTo | jQuery 或 Element 或 Selector 或 String | 当拖拽时，draggable 助手（helper）要追加到哪一个元素。 支持多个类型：
| "parent" |
| axis | String | 约束在水平轴 (x) 或垂直轴 (y) 上拖拽。可能的值："x", "y"。 | false |
| cancel | Selector | 防止从指定的元素上开始拖拽。 | "input, textarea, button, select, option" |
| connectToSortable | Selector | 允许 draggable 放置在指定的 sortable 上。如果使用了该选项，一个 draggable 可被放置在一个 sortable 列表上，然后成为列表的一部分。注意：helper 选项必须设置为 "clone"，以便更好地工作。必须包含 可排序小部件（Sortable Widget）。 | false |
| containment | Selector 或 Element 或 String 或 Array | 约束在指定元素或区域的边界内拖拽。 支持多个类型：
| false |
| cursor | String | 拖拽操作期间的 CSS 光标。 | "auto" |
| cursorAt | Object | 设置拖拽助手（helper）相对于鼠标光标的偏移。坐标可通过一个或两个键的组合成一个哈希给出：{ top, left, right, bottom }。 | false |
| delay | Number | 鼠标按下后直到拖拽开始为止的时间，以毫秒计。该选项可以防止点击在某个元素上时不必要的拖拽。 | 0 |
| disabled | Boolean | 如果设置为 true，则禁用该 draggable。 | false |
| distance | Number | 鼠标按下后拖拽开始前必须移动的距离，以像素计。该选项可以防止点击在某个元素上时不必要的拖拽。 | 1 |
| grid | Array | 对齐拖拽助手（helper）到网格，每个 x 和 y 像素。数组形式必须是 [ x, y ]。 | false |
| handle | Selector 或 Element | 如果指定了该选项，则限制开始拖拽，除非鼠标在指定的元素上按下。只有可拖拽（draggable）元素的后代元素才允许被拖拽。 | false |
| helper | String 或 Function() | 允许一个 helper 元素用于拖拽显示。 支持多个类型：
| "original" |
| iframeFix | Boolean 或 Selector | 防止拖拽期间 iframes 捕捉鼠标移动（mousemove ）事件。在与 cursorAt 选项结合使用时，或鼠标光标未覆盖在助手（helper）上时，非常有用。支持多个类型：
| false |
| opacity | Number | 当被拖拽时助手（helper）的不透明度。 | false |
| refreshPositions | Boolean | 如果设置为 true，在每次鼠标移动（mousemove）时都会计算所有可放置的位置。注意：这解决了高度动态的问题，但是明显降低了性能。 | false |
| revert | Boolean 或 String 或 Function() | 当拖拽停止时，元素是否还原到它的开始位置。 支持多个类型：
| false |
| revertDuration | Number | 还原（revert）动画的持续时间，以毫秒计。如果 revert 选项是 false 则忽略。 | 500 |
| scope | String | 用于组合配套 draggable 和 droppable 项，除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。 | "default" |
| scroll | Boolean | 如果设置为 true，当拖拽时容器会自动滚动。 | true |
| scrollSensitivity | Number | 从要滚动的视区边缘起的距离，以像素计。距离是相对于指针的，不是相对于 draggable。如果 scroll 选项是 false 则忽略。 | 20 |
| scrollSpeed | Number | 当鼠标指针获取到在 scrollSensitivity 距离内时，窗体滚动的速度。如果 scroll 选项是 false 则忽略。 | 20 |
| snap | Boolean 或 Selector | 元素是否对齐到其他元素。 支持多个类型：
| false |
| snapMode | String | 决定 draggable 将对齐到对齐元素的哪个边缘。如果 snap 选项是 false 则忽略。可能的值："inner"、"outer"、"both"。 | "both" |
| snapTolerance | Number | 从要发生对齐的对齐元素边缘起的距离，以像素计。如果 snap 选项是 false 则忽略。 | 20 |
| stack | Selector | 控制匹配选择器（selector）的元素集合的 z-index，总是在当前拖拽项的前面，在类似窗口管理器这样的事物中非常有用。 | false |
| zIndex | Number | 当被拖拽时，助手（helper）的 Z-index。 | false |
2、事件（Events）
| 事件 | 类型 | 描述 |
|---|---|---|
| create( event, ui ) | dragcreate | 当 draggable 被创建时触发。
注意： |
| drag( event, ui ) | drag | 在拖拽期间当鼠标移动时触发。
|
| start( event, ui ) | dragstart | 当拖拽开始时触发。
|
| stop( event, ui ) | dragstop | 当拖拽停止时触发。
|
3、方法（Methods）
| 方法 | 返回 | 描述 |
|---|---|---|
| destroy() | jQuery (plugin only) | 完全移除 draggable 功能。这会把元素返回到它的预初始化状态。
|
| disable() | jQuery (plugin only) | 禁用 draggable。
|
| enable() | jQuery (plugin only) | 启用 draggable。
|
| option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
|
| option() | PlainObject | 获取一个包含键/值对的对象，键/值对表示当前 draggable 选项哈希。
|
| option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 draggable 选项的值。
|
| option( options ) | jQuery (plugin only) | 为 draggable 设置一个或多个选项。
|
| widget() | jQuery | 返回一个包含 draggable 元素的 jQuery 对象。
|
Droppable（放置）
1、参数（Options）
| 选项 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| accept | Selector 或 Function() | 控制哪个可拖拽（draggable）元素可被 droppable 接受。 支持多个类型：
| "*" |
| activeClass | String | 如果指定了该选项，当一个可接受的 draggable 被拖拽时，class 将被添加到 droppable。 | false |
| addClasses | Boolean | 如果设置为 false，将防止 ui-droppable class 被添加。这在数百个元素上调用 .droppable() 时有助于性能优化。 | true |
| disabled | Boolean | 如果设置为 true，则禁用该 droppable。 | false |
| greedy | Boolean | 默认情况下，当一个元素被放置在嵌套是 droppable 上时，每个 droppable 将接收该元素。然而，通过设置该选项为 true，任何父元素的 droppable 将无法接收该元素。 drop 事件仍将照常，但会检查 event.target 以便查看哪个 droppable 接收 draggable 元素。 | false |
| hoverClass | String | 如果指定了该选项，当一个可接受 draggable 被覆盖在 droppable 上时，class 将被添加到 droppable。 | false |
| scope | String | 用于组合配套 draggable 和 droppable 项，除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。 | "default" |
| tolerance | String | 指定用于测试一个 draggable 是否覆盖在一个 droppable 上的模式。可能的值：
| "intersect" |
2、事件（Events）
| 事件 | 类型 | 描述 |
|---|---|---|
| activate( event, ui ) | dropactivate | 当一个可接受的 draggable 开始拖拽时触发。如果您想让 droppable 被放置时"点亮"，该选项就可以派上用场。
|
| create( event, ui ) | dropcreate | 当 droppable 被创建时触发。
注意： |
| deactivate( event, ui ) | dropdeactivate | 当一个可接受的 draggable 停止拖拽时触发。
|
| drop( event, ui ) | drop | 当一个可接受的 draggable 被放置在 droppable（基于 tolerance 选项）上时触发。
|
| out( event, ui ) | dropout | 当 droppable 被拖拽出 droppable（基于 tolerance 选项）时触发。
注意： |
| over( event, ui ) | dropover | 当一个可接受的 draggable 被拖拽在 droppable（基于 tolerance 选项）上时触发。
|
3、方法（Methods）
| 方法 | 返回 | 描述 |
|---|---|---|
| destroy() | jQuery (plugin only) | 完全移除 droppable 功能。这会把元素返回到它的预初始化状态。
|
| disable() | jQuery (plugin only) | 禁用 droppable。
|
| enable() | jQuery (plugin only) | 启用 droppable。
|
| option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
|
| option() | PlainObject | 获取一个包含键/值对的对象，键/值对表示当前 droppable 选项哈希。
|
| option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 droppable 选项的值。
|
| option( options ) | jQuery (plugin only) | 为 droppable 设置一个或多个选项。
|
| widget() | jQuery | 返回一个包含 droppable 元素的 jQuery 对象。
|
用户登录
还没有账号？
立即注册