jQuery UI Selectable CSS变换（缩放+平移）套索选择异常求助

我之前也碰到过这个一模一样的问题！当给Selectable容器加上transform（缩放、平移这类）后，套索看起来是对的，但实际选中的元素完全错位，核心原因就是你说的——jQuery UI的offset()方法完全没考虑CSS变换带来的坐标偏移，而Selectable的选择逻辑就是基于这个不准确的坐标来判断的。

问题根源分析 #

你贴的_create方法里，计算每个selectee位置的代码用了$this.offset()减去容器的offset()来得到相对位置，但offset()返回的是元素在文档流中的原始位置，不会因为transform的视觉变换而改变。当容器被缩放或平移后，元素的实际渲染位置和offset()给出的坐标已经脱节了，这就导致选择判断时用了错误的区域。

修复方案：修改核心坐标计算逻辑 #

要解决这个问题，我们需要替换掉基于offset()的位置计算，改用getBoundingClientRect()来获取元素的实际渲染位置（相对于视口），同时还要处理transform的缩放因子，确保坐标和尺寸都对应上。

步骤1：替换位置计算代码

把你贴的这段代码：

var $this = $( this ), selecteeOffset = $this.offset(), pos = { left: selecteeOffset.left - that.elementPos.left, top: selecteeOffset.top - that.elementPos.top };
$.data( this, "selectable-item", {
  element: this,
  $element: $this,
  left: pos.left,
  top: pos.top,
  right: pos.left + $this.outerWidth(),
  bottom: pos.top + $this.outerHeight(),
  // ... 其他属性
} );

替换成下面的代码，新增一个获取transform缩放因子的辅助函数：

// 辅助函数：获取元素的transform缩放比例
function getTransformScale(element) {
  const transform = window.getComputedStyle(element).transform;
  if (transform === 'none') return { x: 1, y: 1 };
  const matrix = transform.match(/matrix\(([^)]+)\)/)[1].split(',').map(parseFloat);
  // CSS matrix格式：matrix(a, b, c, d, tx, ty)，a是x轴缩放，d是y轴缩放
  return { x: matrix[0], y: matrix[3] };
}

// 计算实际渲染位置
var $this = $(this);
const containerRect = that.element[0].getBoundingClientRect();
const selecteeRect = this.getBoundingClientRect();
const scale = getTransformScale(that.element[0]);

// 计算相对于容器的修正后坐标（抵消缩放和偏移）
const pos = {
  left: (selecteeRect.left - containerRect.left) / scale.x,
  top: (selecteeRect.top - containerRect.top) / scale.y,
  right: (selecteeRect.right - containerRect.left) / scale.x,
  bottom: (selecteeRect.bottom - containerRect.top) / scale.y
};

// 更新selectable-item数据
$.data(this, "selectable-item", {
  element: this,
  $element: $this,
  left: pos.left,
  top: pos.top,
  right: pos.right,
  bottom: pos.bottom,
  startselected: false,
  selected: $this.hasClass("ui-selected"),
  selecting: $this.hasClass("ui-selecting"),
  unselecting: $this.hasClass("ui-unselecting")
});

步骤2：调整套索Helper的位置（可选）

如果你的套索Helper也出现了位置偏差，还需要修改_mouseDrag方法里的Helper定位逻辑，同样用getBoundingClientRect()来计算容器的位置，而不是offset()。

无需修改源码的Workaround #

如果你不想直接修改jQuery UI的源码，可以在初始化Selectable时，重写refresh方法来覆盖默认的位置计算：

$(".your-selectable-container").selectable({
  refresh: function() {
    const $container = $(this);
    const containerRect = $container[0].getBoundingClientRect();
    const scale = getTransformScale($container[0]);
    
    $container.find(".ui-selectee").each(function() {
      const $item = $(this);
      const itemRect = this.getBoundingClientRect();
      const pos = {
        left: (itemRect.left - containerRect.left) / scale.x,
        top: (itemRect.top - containerRect.top) / scale.y,
        right: (itemRect.right - containerRect.left) / scale.x,
        bottom: (itemRect.bottom - containerRect.top) / scale.y
      };
      // 更新已存储的selectable-item数据
      const itemData = $item.data("selectable-item");
      $.extend(itemData, pos);
      $item.data("selectable-item", itemData);
    });
  }
});

// 每次容器transform变化后，手动触发refresh
function updateSelectableAfterTransform() {
  $(".your-selectable-container").selectable("refresh");
}

注意事项 #

• 这个方案支持平移、缩放类的transform，如果有旋转等复杂变换，可能需要更复杂的矩阵逆运算来修正坐标，但大多数场景下缩放+平移的处理已经足够。
• 确保在容器的transform属性变化后，调用一次selectable("refresh")来更新所有元素的位置数据。

内容的提问来源于stack exchange，提问作者marius