博客

jQuery UI sortable scroll选项

  • Post category:jquery

jQuery UI 的 Sortable 组件提供了一个 scroll 选项，该选项用于在 Sortable 实例中启用滚动。在本教程中，我们将详细介绍 Sortable 的 scroll 选项的使用方法。

scroll选项基本语法如下：

$( ".selector" ).sortable({
  scroll: true,
  scrollSensitivity: 100,
  scrollSpeed: 40
});

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

以下两个示例：

示例一：使用 Sortable 的 scroll 选项

 "#my-sortable" ).sortable({
  scroll: true,
  scrollSensitivity: 100,
  scrollSpeed: 40
});

这将创建一个名为 my-sortable 的 Sortable 实例，并启用滚动。scrollSensitivity 选项设置标指针离 Sortable 边缘的距离，以启动滚动。scrollSpeed 选项设置滚动速度。

示例二：使用 Sortable 的 scroll 选项和 CSS 类

$( "#my-sortable" ).sortable({
  scroll true,
  scrollSensitivity: 100,
  scrollSpeed: 40,
  start: function( event, ui ) {
    $( "body" ).addClass( "dragging" );
  },
  stop: function( event, ui ) {
    $( "body" ).removeClass( "dragging" );
  }
});

这将创建一个名为 my-sortable 的 Sortable 实例，并启用滚动。scrollSensitivity 选项设置鼠标指针离 Sortable 边缘的距离，以启动滚动。scrollSpeed 选项设置动速度。start 和 stop 事件处理程序使用 addClass() 和 removeClass() 方法将 CSS 类“dragging”添加到和从 body 元素中删除。

总结：

jQuery UI 的 Sortable 组件提供了一个 scroll 选项，选项用于在 Sortable 实例中启用滚动。要使用 scroll 选项，需要将其与 Sortable 的 jQuery 对象一起使用。可以使用 scrollSensitivity 和 scrollSpeed 选项调整滚动的灵敏度和速度。可以 start 和 stop 事件处理程序中执行任何操作，例如添加或删除 CSS 类。

Tags: