基于其他元素调整jQuery UI可拖拽元素的吸附位置问题

问题背景 #

我在做一个画板编辑器，上面的元素都是绝对定位、支持拖拽的。用户可以用套索或者Shift键多选元素，选中的元素会加上.selected类。现在拖拽其中一个选中元素时，其他选中元素能跟着移动，但只有被拖拽的那个会触发吸附效果，所有选中元素应该一起吸附才对。

我试过的方法都不行 #

• 计算选中元素的整体边界框，在drag事件里改ui.position让整体吸附，结果元素跳得乱七八糟
• 尝试在边界框要吸附的时候锁死其他元素位置，但被拖拽的那个还是会自己动
• 修改jQuery UI的draggable snap插件，用选中元素的边界框算吸附，结果直接把元素跳到吸附目标上了
• 用helper函数把选中元素包进一个div里，但因为元素是绝对定位，位置直接跑偏了，就算重新计算，拖拽结束后也没法保持正确位置，放弃了

可行解决方案 #

核心是基于选中元素的整体边界框统一处理吸附，再把偏移量同步给所有选中元素，具体实现步骤：

1. 拖拽开始时记录基准数据 #

在dragstart里存好被拖拽元素的初始位置，以及其他选中元素相对于它的偏移，还有整个选中组的初始边界框：

$('.draggable').draggable({
  start: function(event, ui) {
    const $dragEl = $(this);
    // 存拖拽元素的初始位置（相对于父容器）
    $dragEl.data('initLeft', parseInt($dragEl.css('left')));
    $dragEl.data('initTop', parseInt($dragEl.css('top')));
    
    // 存每个选中元素相对于拖拽元素的偏移
    $('.selected').each(function() {
      const $el = $(this);
      $(this).data('relX', parseInt($el.css('left')) - $dragEl.data('initLeft'));
      $(this).data('relY', parseInt($el.css('top')) - $dragEl.data('initTop'));
    });
    
    // 计算并存储选中组的初始边界框
    const $selected = $('.selected');
    const lefts = $selected.map((i, el) => parseInt($(el).css('left'))).get();
    const tops = $selected.map((i, el) => parseInt($(el).css('top'))).get();
    const rights = $selected.map((i, el) => parseInt($(el).css('left')) + $(el).width()).get();
    const bottoms = $selected.map((i, el) => parseInt($(el).css('top')) + $(el).height()).get();
    
    $dragEl.data('groupBounds', {
      minLeft: Math.min(...lefts),
      minTop: Math.min(...tops),
      maxRight: Math.max(...rights),
      maxBottom: Math.max(...bottoms)
    });
  },
  // 关闭默认吸附，我们自己处理
  snap: false,
  // ...其他配置
});

2. 拖拽过程中统一处理吸附和同步 #

在drag事件里，先算整个选中组的偏移，然后判断是否触发吸附，最后把调整后的偏移量应用到所有选中元素：

drag: function(event, ui) {
  const $dragEl = $(this);
  const initGroupBounds = $dragEl.data('groupBounds');
  const initDragLeft = $dragEl.data('initLeft');
  const initDragTop = $dragEl.data('initTop');
  
  // 计算当前拖拽带来的组偏移
  let deltaX = ui.position.left - initDragLeft;
  let deltaY = ui.position.top - initDragTop;
  
  // 自定义吸附逻辑：以组的边缘对齐目标（这里示例对齐其他元素的边缘）
  $('.snap-target').each(function() {
    const $target = $(this);
    const targetLeft = parseInt($target.css('left'));
    const targetTop = parseInt($target.css('top'));
    
    // 组左边缘吸附目标左边缘
    const groupCurrentLeft = initGroupBounds.minLeft + deltaX;
    if (Math.abs(groupCurrentLeft - targetLeft) <= 8) { // 8px是吸附阈值，可调整
      deltaX = targetLeft - initGroupBounds.minLeft;
    }
    
    // 组上边缘吸附目标上边缘
    const groupCurrentTop = initGroupBounds.minTop + deltaY;
    if (Math.abs(groupCurrentTop - targetTop) <= 8) {
      deltaY = targetTop - initGroupBounds.minTop;
    }
    
    // 可以扩展右、下边缘，或者网格吸附的逻辑
  });
  
  // 同步所有选中元素的位置
  $('.selected').each(function() {
    const $el = $(this);
    $el.css({
      left: initDragLeft + deltaX + $el.data('relX'),
      top: initDragTop + deltaY + $el.data('relY')
    });
  });
  
  // 修正拖拽元素的位置，避免默认拖拽的偏差
  ui.position.left = initDragLeft + deltaX;
  ui.position.top = initDragTop + deltaY;
}

3. 拖拽结束清理临时数据 #

避免临时数据影响下次拖拽：

stop: function(event, ui) {
  $('.selected').each(function() {
    $(this).removeData('relX relY');
  });
  $(this).removeData('initLeft initTop groupBounds');
}

注意点 #

• 一定要关闭draggable默认的snap配置，不然会和自定义逻辑冲突
• 吸附阈值可以根据你的需求调整，数值越小吸附越精准
• 如果是吸附到网格，把上面的目标元素判断改成网格坐标计算就行

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