博客

当使用jQuery UI中的Droppable方法时，可以设置tolerance选项来指定放置元素的容差。tolerance选项有以下几种设置：

• “fit”：表示拖拽元素必须完全放置在容器内部。
• “intersect”：表示两个元素有重叠交集时才能放置。
• “pointer”：表示拖拽元素的中心点必须在容器内部。
• “touch”：表示拖拽元素只要与容器接触，即可放置。

下面我们通过两个示例来详细讲解Droppable tolerance选项的用法。

1. “fit”选项示例

在这个示例中，我们有一个拖拽元素和一个容器元素。设置Droppable方法的tolerance选项为”fit”，表示拖拽元素必须完全放置在容器内部才能放置。

HTML代码如下：

<div class="draggable">拖拽我</div>
<div class="droppable">放置在这里</div>

JavaScript代码如下：

$('.droppable').droppable({
  tolerance: 'fit',
  drop: function(event, ui) {
    $(this).text('已放置');
  }
});

$('.draggable').draggable();

在这个示例中，当我们把拖拽元素放置在容器元素之外时，不会触发放置效果。只有当我们把拖拽元素完全放置在容器内部时，才会触发放置效果。

2. “intersect”选项示例

在这个示例中，我们有一个拖拽元素和一个容器元素。设置Droppable方法的tolerance选项为”intersect”，表示两个元素有重叠交集时才能放置。

HTML代码如下：

<div class="draggable">拖拽我</div>
<div class="droppable">放置在这里</div>

JavaScript代码如下：

$('.droppable').droppable({
  tolerance: 'intersect',
  drop: function(event, ui) {
    $(this).text('已放置');
  }
});

$('.draggable').draggable();

在这个示例中，当我们把拖拽元素移动到容器元素上方但不重叠时，不会触发放置效果。只有当我们把拖拽元素与容器元素重叠时，才会触发放置效果。

综上所述，通过设置Droppable方法的tolerance选项，我们可以控制拖拽元素放置的容差，从而更好地控制元素交互效果。