博客

jQuery UI 的 Draggable 组件提供了一个 stack 选项，该选项用于指定拖动元素的堆叠顺序。在本教程中，我们将详细介绍 stack 选项的使用方法。

stack 选项基本语法如下：

$( ".selector" ).draggable({
  stack: ".stack-selector"
});

其中，”.selector” 是 Draggable 的 CSS 选择器，”.stack-selector” 是要指定的堆叠元素的 CSS 选择器。

以下是两个示例：

示例一：使用 stack 选项定堆叠元素

$( "#draggable" ).draggable({
  stack: ".stackable"
});

这将在名为 draggable 的元素上初始化一个 Draggable 实例，并使用 stack 选项指定堆叠元素的 CSS 选择器为 .stackable。当拖动元素时，它将在堆叠元素之上。

示例二使用 stack 选项和 handle 选项指定堆叠元素和拖动手柄

$( "#draggable" ).draggable({
  handle: ".handle",
  stack: ".stackable"
});

$( ".stackable" ).click(function() {
  $( this ).toggleClass( "highlight" );
});

这将在名为 draggable 的元素上初始化一个 Draggable 实例，并使用 handle 选项指定拖动手柄的 CSS 选择器为 .handle，stack 选项指定堆叠元素的 CSS 选择器为 .stackable。当拖动元素时，只有拖动手柄才能拖动元素。当单击堆叠元素时，将切换该元素的高亮显示。

总结：

jQuery UI 的 Draggable 组件提供了一个 stack 选项，该选项用于指定拖动元素的堆叠顺序。要使用 stack 选项，需要将其与 Draggable 的 jQuery 对象一起使用。可以使用 stack 选项指定堆叠元素的 CSS 选择器，并使用 handle 选项指定拖动手柄的 CSS 选择器。当拖动元素时，它将在堆叠元素之上。