博客

以下是关于 jQuery UI 的 Draggable containment 选项的详细攻略：

jQuery UI 的 Draggable containment 选项

jQuery UI 的 Draggable containment 选项用于限制拖动元素的范围。该选项可以设置为一个选择器、一个 DOM 元素、一个数组或字符串 “parent”。

语法

$( ".selector" ).draggable({
  containment: "parent"
});

参数

• selector：一个选择器，表示拖动元素的限制范围。
• DOM 元素：一个 DOM 元素，表示拖动元素的限制范围。
• 数组：一个包含四个值的数组，分别表示限制范围的左、上、右、下边界。
• 字符串 "parent"：表示限制范围为父元素。

示例一：限制拖动范围为父元素

$( "#myElement" ).draggable({
  containment: "parent"
});

这将限制 id 为 myElement 的元素只能在其父元素内拖动。

示例二：限制拖动范围为指定元素

$( "#myElement" ).draggable({
  containment: "#myContainer"
});

这将限制 id 为 myElement 的元素只能在 id 为 myContainer 的元素内拖动。

总结：

jQuery UI 的 Draggable containment 选项用于限制拖动元素的范围。该选项可以设置为一个选择器、一个 DOM 元素、一个数组或字符串 “parent”。使用该选项可以限制拖动元素的范围，提高网站的可用性。

以上是关于 jQuery UI 的 Draggable containment 选项的详细攻略，包括语法和两个示例。