jQuery UI Draggable option() 方法介绍

概述

jQuery UI 是一个基于 jQuery 的用户界面库，提供了一套丰富的可交互的 UI 组件和效果。其中的 Draggable 组件允许用户将元素拖拽到指定的位置。

option() 方法是 Draggable 组件提供的一个函数，用于获取或设置 Draggable 实例的选项。

语法

$( ".selector" ).draggable( "option", optionName );
$( ".selector" ).draggable( "option", optionName, value );

• .selector: 要应用 Draggable 组件的元素选择器。
• optionName: 要获取或设置的选项名称。
• value (可选): 要设置的选项值。

使用示例

获取选项值

// 获取 containment 选项的值
var containment = $( ".selector" ).draggable( "option", "containment" );

上述示例中，通过调用 option() 方法来获取 Draggable 组件实例的 containment 选项的值。

设置选项值

// 设置 containment 选项的值为父元素
$( ".selector" ).draggable( "option", "containment", "parent" ); 

上述示例中，通过调用 option() 方法来设置 Draggable 组件实例的 containment 选项的值为 "parent"，表示只能在其父元素内拖拽。

设置多个选项值

// 设置多个选项值
$( ".selector" ).draggable( "option", {
  containment: "parent",
  revert: true,
  helper: "clone"
});

上述示例中，通过传递一个对象参数来设置多个选项的值。其中，containment 被设置为 "parent"，revert 被设置为 true，helper 被设置为 "clone"。

常用选项

以下是一些常用的 Draggable 组件选项：

• containment：指定拖拽的约束范围。
• revert：拖拽结束后，是否返回拖拽前的位置。
• helper：指定拖拽时的辅助元素。
• cursor：指定拖拽时的鼠标样式。

总结

通过 jQuery UI 的 Draggable 组件和 option() 方法，程序员可以方便地控制拖拽功能的各种选项。以上介绍了 option() 方法的语法和示例，以及常用的选项。

注意: 以上示例仅供参考，请根据实际需求进行相应的调整和使用。