博客

jQuery UI 的 Sortable 组件提供了一个 zIndex 选项，该选项允许您设置 Sortable 实例中项目的 z-index 值。在本教程中，我们将详细介绍 Sortable 的 zIndex 选项的使用方法。

zIndex 选项基本语法如下：

$( ".selector" ).sortable({
  zIndex: 1000
});

其中，”.selector” 是 Sortable 的 CSS 选择器。

以下两个示例：

示例一：使用 Sortable 的 zIndex 选项

$( "#my-sortable" ).sortable({
  zIndex:1000
});

这将创建一个名为 my-sortable 的 Sortable 实例，并将其项目的 z-index 值设置为 1000。

示例二：使用 Sortable zIndex 选项和 ui.item 属性

$( "#my-sortable" ).sortable({
  zIndex: 1000,
  update: function( event, ui ) {
    ui.item.css( "z-index", 1001 );
  }
});

这将创建一个名为 my-sortable 的 Sortable 实例，并将其项目的 z-index 值设置 1000。在 update 事件处理程序中，使用 ui.item 属性将移动的项目的 z-index 值设置为 1001。

总结：

jQuery UI 的 Sortable 组件提供了一个 zIndex 选项，该选项允许您设置 Sortable 实例中项目 z-index 值。要使用 zIndex 选项，需要将其与 Sortable 的 jQuery 对象一起使用。可以将 zIndex 值设置为任何整数值。可以使用 ui.item 属性访问移动的项目，并在 update 事件处理程序中更改其 z-index 值。