jQuery UI
jQuery UI 简介 jQuery UI 下载 jQuery UI 使用 jQuery UI 定制 jQuery UI 工作原理 jQuery UI 主题 jQuery UI ThemeRoller jQuery UI CSS 框架 API jQuery UI 设计主题 jQuery UI 部件库 jQuery UI 扩展小部件 jQuery UI 小部件方法调用 jQuery UI 为什么使用部件库 jQuery UI 如何使用部件库 jQuery UI API 文档 API 类别 - 特效 API 类别 - 特效核心 API 类别 - 交互 API 类别 - 方法重载 API 类别 - 方法 API 类别 - 选择器 API 类别 - 主题 API 类别 - UI 核心 API 类别 - 实用工具 API 类别 - 小部件
首页 > JavaScript > jQuery UI

可放置小部件（Droppable Widget）

jQuery UI API - 可放置小部件（Droppable Widget）

所属类别

交互（Interactions）

用法

描述：为可拖拽小部件创建目标。

版本新增：1.0

依赖：


注释：jQuery UI 可放置（Droppable）插件让被选元素可放置（意味着它们在拖拽后接受被放置）。您可以逐个指定哪一个 draggable 会接受。

快速导航

选项 方法 事件
out

选项 类型 描述 默认值
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-droppableclass 被添加。这在数百个元素上调用.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选项）上时触发。
  • 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选项）时触发。
  • 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选项）上时触发。
  • 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>
上一篇
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案：鲁ICP备09046678号-3