ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# jQuery UI API - 可放置小部件(Droppable Widget) ## 所属类别 [交互(Interactions)](ref-interactions.html) ## 用法 **描述:**为可拖拽小部件创建目标。 **版本新增:**1.0 **依赖:** * [UI 核心(UI Core)](ref-ui-core.html) * [部件库(Widget Factory)](api-jQuery-widget.html) * [鼠标交互(Mouse Interaction)](api-mouse.html) **注释:**jQuery UI 可放置(Droppable)插件让被选元素可放置(意味着它们在拖拽后接受被放置)。您可以逐个指定哪一个 draggable 会接受。 ### 快速导航 | 选项 | 方法 | 事件 | | --- | --- | --- | | [accept](#option-accept)[activeClass](#option-activeClass)[addClasses](#option-addClasses)[disabled](#option-disabled)[greedy](#option-greedy)[hoverClass](#option-hoverClass)[scope](#option-scope)[tolerance](#option-tolerance) | [destroy](#method-destroy)[disable](#method-disable)[enable](#method-enable)[option](#method-option)[widget](#method-widget) | [activate](#event-activate)[create](#event-create)[deactivate](#event-deactivate)[drop](#event-drop)[out](#event-out)[over](#event-over) | #### accept **类型**:Selector 或 Function() **描述**:控制哪个可拖拽(draggable)元素可被 droppable 接受。 **支持多个类型:** * **Selector**:一个选择器,指定哪个可拖拽(draggable)元素可被 droppable 接受。 * **Function()**:一个函数,将被页面上每个 draggable 调用(作为第一个参数传递给函数)。如果 draggable 被接受,该函数必须返回 `true`。 **代码实例:** 初始化带有指定 `accept` 选项的 droppable: ``` $( ".selector" ).droppable({ accept: ".special" }); ``` 在初始化后,获取或设置 `accept` 选项: ``` // getter var accept = $( ".selector" ).droppable( "option", "accept" ); // setter $( ".selector" ).droppable( "option", "accept", ".special" ); ``` **默认值**:"*" #### activeClass **类型**:String **描述**:如果指定了该选项,当一个可接受的 draggable 被拖拽时,class 将被添加到 droppable。 **代码实例:** 初始化带有指定 `activeClass` 选项的 droppable: ``` $( ".selector" ).droppable({ activeClass: "ui-state-highlight" }); ``` 在初始化后,获取或设置 `activeClass` 选项: ``` // getter var activeClass = $( ".selector" ).droppable( "option", "activeClass" ); // setter $( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" ); ``` **默认值**:false #### addClasses **类型**:Boolean **描述**:如果设置为 `false`,将防止 `ui-droppable` class 被添加。这在数百个元素上调用 `.droppable()` 时有助于性能优化。 **代码实例:** 初始化带有指定 `addClasses` 选项的 droppable: ``` $( ".selector" ).droppable({ addClasses: false }); ``` 在初始化后,获取或设置 `addClasses` 选项: ``` // getter var addClasses = $( ".selector" ).droppable( "option", "addClasses" ); // setter $( ".selector" ).droppable( "option", "addClasses", false ); ``` **默认值**:true #### disabled **类型**:Boolean **描述**:如果设置为 `true`,则禁用该 droppable。 **代码实例:** 初始化带有指定 `disabled` 选项的 droppable: ``` $( ".selector" ).droppable({ disabled: true }); ``` 在初始化后,获取或设置 `disabled` 选项: ``` // getter var disabled = $( ".selector" ).droppable( "option", "disabled" ); // setter $( ".selector" ).droppable( "option", "disabled", true ); ``` **默认值**:false #### greedy **类型**:Boolean **描述**:默认情况下,当一个元素被放置在嵌套是 droppable 上时,每个 droppable 将接收该元素。然而,通过设置该选项为 `true`,任何父元素的 droppable 将无法接收该元素。 `drop` 事件仍将照常,但会检查 `event.target` 以便查看哪个 droppable 接收 draggable 元素。 **代码实例:** 初始化带有指定 `greedy` 选项的 droppable: ``` $( ".selector" ).droppable({ greedy: true }); ``` 在初始化后,获取或设置 `greedy` 选项: ``` // getter var greedy = $( ".selector" ).droppable( "option", "greedy" ); // setter $( ".selector" ).droppable( "option", "greedy", true ); ``` **默认值**:false #### hoverClass **类型**:String **描述**:如果指定了该选项,当一个可接受 draggable 被覆盖在 droppable 上时,class 将被添加到 droppable。 **代码实例:** 初始化带有指定 `hoverClass` 选项的 droppable: ``` $( ".selector" ).droppable({ hoverClass: "drop-hover" }); ``` 在初始化后,获取或设置 `hoverClass` 选项: ``` // getter var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" ); // setter $( ".selector" ).droppable( "option", "hoverClass", "drop-hover" ); ``` **默认值**:false #### scope **类型**:String **描述**:用于组合配套 draggable 和 droppable 项,除了 droppable 的 `accept` 选项之外。一个与 droppable 带有相同的 `scope` 值的 draggable 会被该 droppable 接受。 **代码实例:** 初始化带有指定 `scope` 选项的 droppable: ``` $( ".selector" ).droppable({ scope: "tasks" }); ``` 在初始化后,获取或设置 `scope` 选项: ``` // getter var scope = $( ".selector" ).droppable( "option", "scope" ); // setter $( ".selector" ).droppable( "option", "scope", "tasks" ); ``` **默认值**:"default" #### tolerance **类型**:String **描述**:指定用于测试一个 draggable 是否覆盖在一个 droppable 上的模式。可能的值: * `"fit"`:draggable 完全重叠在 droppable 上。 * `"intersect"`:draggable 重叠在 droppable 上,两个方向上至少 50%。 * `"pointer"`:鼠标指针重叠在 droppable 上。 * `"touch"`:draggable 重叠在 droppable 上,任何数量皆可。 **代码实例:** 初始化带有指定 `tolerance` 选项的 droppable: ``` $( ".selector" ).droppable({ tolerance: "fit" }); ``` 在初始化后,获取或设置 `tolerance` 选项: ``` // getter var tolerance = $( ".selector" ).droppable( "option", "tolerance" ); // setter $( ".selector" ).droppable( "option", "tolerance", "fit" ); ``` **默认值**:"intersect" #### 方法 #### destroy() **类型**:jQuery (plugin only) **描述**:完全移除 droppable 功能。这会把元素返回到它的预初始化状态。 * 该方法不接受任何参数。 **代码实例:** 调用 destroy 方法: ``` $( ".selector" ).droppable( "destroy" ); ``` #### disable() **类型**:jQuery (plugin only) **描述**:禁用 droppable。 * 该方法不接受任何参数。 **代码实例:** 调用 disable 方法: ``` $( ".selector" ).droppable( "disable" ); ``` #### enable() **类型**:jQuery (plugin only) **描述**:启用 droppable。 * 该方法不接受任何参数。 **代码实例:** 调用 enable 方法: ``` $( ".selector" ).droppable( "enable" ); ``` #### option( optionName ) **类型**:Object **描述**:获取当前与指定的 `optionName` 关联的值。 * **optionName** 类型:String 描述:要获取的选项的名称。 **代码实例:** 调用该方法: ``` var isDisabled = $( ".selector" ).droppable( "option", "disabled" ); ``` #### option() **类型**:PlainObject **描述**:获取一个包含键/值对的对象,键/值对表示当前 droppable 选项哈希。 * 该方法不接受任何参数。 **代码实例:** 调用该方法: ``` var options = $( ".selector" ).droppable( "option" ); ``` #### option( optionName, value ) **类型**:jQuery (plugin only) **描述**:设置与指定的 `optionName` 关联的 droppable 选项的值。 * **optionName** 类型:String 描述:要设置的选项的名称。 * **value** 类型:Object 描述:要为选项设置的值。 **代码实例:** 调用该方法: ``` $( ".selector" ).droppable( "option", "disabled", true ); ``` #### option( options ) **类型**:jQuery (plugin only) **描述**:为 droppable 设置一个或多个选项。 * **options** 类型:Object 描述:要设置的 option-value 对。 **代码实例:** 调用该方法: ``` $( ".selector" ).droppable( "option", { disabled: true } ); ``` #### widget() **类型**:jQuery **描述**:返回一个包含 droppable 元素的 `jQuery` 对象。 * 该方法不接受任何参数。 **代码实例:** 调用 widget 方法: ``` var widget = $( ".selector" ).droppable( "widget" ); ``` #### 事件 #### activate( event, ui ) **类型**:dropactivate **描述**:当一个可接受的 draggable 开始拖拽时触发。如果您想让 droppable 被放置时"点亮",该选项就可以派上用场。 * **event** 类型:Event * **ui** 类型:Object * **draggable** 类型:jQuery 描述:jQuery 对象,表示 draggable 元素。 * **helper** 类型:jQuery 描述:jQuery 对象,表示被拖拽的助手(helper)。 * **position** 类型:Object 描述:draggable 助手(helper)的当前 CSS 位置,比如 `{ top, left }` 对象。 * **offset** 类型:Object 描述:draggable 助手(helper)的当前偏移位置,比如 `{ top, left }` 对象。 **代码实例:** 初始化带有指定 activate 回调的 droppable: ``` $( ".selector" ).droppable({ activate: function( event, ui ) {} }); ``` 绑定一个事件监听器到 dropactivate 事件: ``` $( ".selector" ).on( "dropactivate", function( event, ui ) {} ); ``` #### create( event, ui ) **类型**:dropcreate **描述**:当 droppable 被创建时触发。 * **event** 类型:Event * **ui** 类型:Object 注意:`ui` 对象是空的,这里包含它是为了与其他事件保持一致性。 **代码实例:** 初始化带有指定 create 回调的 droppable: ``` $( ".selector" ).droppable({ create: function( event, ui ) {} }); ``` 绑定一个事件监听器到 dropcreate 事件: ``` $( ".selector" ).on( "dropcreate", function( event, ui ) {} ); ``` #### deactivate( event, ui ) **类型**:dropdeactivate **描述**:当一个可接受的 draggable 停止拖拽时触发。 * **event** 类型:Event * **ui** 类型:Object * **draggable** 类型:jQuery 描述:jQuery 对象,表示 draggable 元素。 * **helper** 类型:jQuery 描述:jQuery 对象,表示被拖拽的助手(helper)。 * **position** 类型:Object 描述:draggable 助手(helper)的当前 CSS 位置,比如 `{ top, left }` 对象。 * **offset** 类型:Object 描述:draggable 助手(helper)的当前偏移位置,比如 `{ top, left }` 对象。 **代码实例:** 初始化带有指定 deactivate 回调的 droppable: ``` $( ".selector" ).droppable({ deactivate: function( event, ui ) {} }); ``` 绑定一个事件监听器到 dropdeactivate 事件: ``` $( ".selector" ).on( "dropdeactivate", function( event, ui ) {} ); ``` #### drop( event, ui ) **类型**:drop **描述**:当一个可接受的 draggable 被放置在 droppable(基于 `[tolerance](#option-tolerance)` 选项)上时触发。 * **event** 类型:Event * **ui** 类型:Object * **draggable** 类型:jQuery 描述:jQuery 对象,表示 draggable 元素。 * **helper** 类型:jQuery 描述:jQuery 对象,表示被拖拽的助手(helper)。 * **position** 类型:Object 描述:draggable 助手(helper)的当前 CSS 位置,比如 `{ top, left }` 对象。 * **offset** 类型:Object 描述:draggable 助手(helper)的当前偏移位置,比如 `{ top, left }` 对象。 **代码实例:** 初始化带有指定 drop 回调的 droppable: ``` $( ".selector" ).droppable({ drop: function( event, ui ) {} }); ``` 绑定一个事件监听器到 drop 事件: ``` $( ".selector" ).on( "drop", function( event, ui ) {} ); ``` #### out( event, ui ) **类型**:dropout **描述**:当 droppable 被拖拽出 droppable(基于 `[tolerance](#option-tolerance)` 选项)时触发。 * **event** 类型:Event * **ui** 类型:Object 注意:`ui` 对象是空的,这里包含它是为了与其他事件保持一致性。 **代码实例:** 初始化带有指定 out 回调的 droppable: ``` $( ".selector" ).droppable({ out: function( event, ui ) {} }); ``` 绑定一个事件监听器到 dropout 事件: ``` $( ".selector" ).on( "dropout", function( event, ui ) {} ); ``` #### over( event, ui ) **类型**:dropover **描述**:当一个可接受的 draggable 被拖拽在 droppable(基于 `[tolerance](#option-tolerance)` 选项)上时触发。 * **event** 类型:Event * **ui** 类型:Object * **draggable** 类型:jQuery 描述:jQuery 对象,表示 draggable 元素。 * **helper** 类型:jQuery 描述:jQuery 对象,表示被拖拽的助手(helper)。 * **position** 类型:Object 描述:draggable 助手(helper)的当前 CSS 位置,比如 `{ top, left }` 对象。 * **offset** 类型:Object 描述:draggable 助手(helper)的当前偏移位置,比如 `{ top, left }` 对象。 **代码实例:** 初始化带有指定 over 回调的 droppable: ``` $( ".selector" ).droppable({ over: function( event, ui ) {} }); ``` 绑定一个事件监听器到 dropover 事件: ``` $( ".selector" ).on( "dropover", function( event, ui ) {} ); ``` ## 实例 一对 draggable 和 droppable 元素。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>可放置小部件(Droppable Widget)演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> #draggable { width: 100px; height: 100px; background: #ccc; } #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 125px; background: #999; color: #fff; padding: 10px; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="droppable">请放置到这里!</div> <div id="draggable">请拖拽我!</div> <script> $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function() { alert( "dropped" ); } }); </script> </body> </html> ```