博客

jQuery UI Sortable tolerance选项

  • Post category:jquery

jQuery UI 的 Sortable 组件提供了一个 tolerance 选项，该选项定义了 Sortable 实例中的项目与鼠标指针之间的距离，以确定项目是否该开始移动。在本教程中，我们将详细介绍 Sortable 的 tolerance 选项的使用方法。

tolerance 选项基本语如下：

$( ".selector" ).sortable({
  tolerance: "intersect"
});

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

tolerance 选项有以下三个值：

  • “intersect”：默认值。项目必须与鼠标指针重叠，才能开始移动。
  • “pointer”：项目必须与鼠标指针的中心点重叠，才能开始移动。
  • “touch”：项目必须与鼠标指针或触摸设备的触摸点重叠，才能开始移动。

以下两个示例：

示例一使用 Sortable 的 tolerance 选项

$( "#my-sortable" ).sortable({
  tolerance: "pointer"
});

这将创建一个名为 my-sortable 的 Sortable 实例，并将 tolerance 选项设置为 “pointer”。这意味着项目必须与鼠标指针的中心点重叠，才能开始移动。

示例二：使用 Sortable 的 tolerance 选项和 helper选项

$( "#my-sortable" ).sortable({
  tolerance: "touch",
  helper: "clone"
});

这将创建一个名为 my-sortable 的 Sortable 实例，并将 tolerance 选项设置为 “touch”。这意味着项目必须与鼠标指针或触摸设备的触摸点重叠，才能开始移动。此外，helper 选项设置为 “clone”，这将在移动项目时创建一个克隆，而不是移动原始项目。

总结：

jQuery UI 的 Sortable 组件提供了一个 tolerance 选项，该选项定义了 Sortable 实例中的项目与鼠标指针之间的距离，以确定项目是否应该开始移动。tolerance 选项有三个值：”intersect”、”pointer” 和 “touch”。可以将 选项与其他 Sortable 选项一起使用，以创建自定义的 Sortable 实例。

Tags: