jQuery UI Draggable多元素批量拖拽后全部回归原位及重叠避免问题

核心问题原因 #

jQuery UI 自带的revert配置仅对触发拖拽动作的单个元素生效，你手动同步位置的其他选中元素没有绑定默认的复位逻辑，因此会出现仅单个元素回退、其余元素错位重叠的问题。 #

具体修改方案 #

1. 关闭默认revert，手动实现批量复位逻辑

删除原有revert: "valid"配置，改为在拖拽结束时自行判断放置有效性，批量控制所有选中元素的复位行为。

2. 新增放置有效性标记与原始位置存储

在拖拽开始时保存所有选中元素的原始定位值，在droppable的放置回调中标记有效放置状态。

3. 新增防重叠碰撞检测

有效放置后校验所有选中元素的新位置，若和已有元素重叠则整体复位。 #

完整修改后代码 #

var selectedClass = "ui-selected";
// 新增变量：标记放置是否有效、存储选中元素原始位置
var dropValid = false;
var originPositions = [];

function dragTiles(){
  $(".draggable").off('mouseup').on('mouseup', function() {
    if ($(this).hasClass('ui-draggable-dragging')){
      $(this).addClass(selectedClass);
    }else {
      $(this).toggleClass(selectedClass);
    }
  });

  $(".draggable").draggable({
    snap: true,
    //grid: [ 1, 31 ],
    zIndex: 100,
    // 关闭默认revert，自行控制
    revert : false,

    start: function(e,ui){
      // 重置放置标记和原始位置存储
      dropValid = false;
      originPositions = [];
      
      $(this).addClass(selectedClass);
      $(this).removeClass('prevent');
      var pz = $("#canvas");
      // 读取当前缩放系数用于调整拖拽元素坐标
      currentScale = pz.panzoom("getMatrix")[0];
      $(this).css("cursor","move");
      pz.panzoom("disable");// 禁用panzoom避免双重偏移

      ui.position.left = ui.position.left/currentScale;
      ui.position.top = ui.position.top/currentScale;


      // 多元素拖拽逻辑开始
      if ($(this).hasClass("ui-selected")) {
           // 选中状态下，记录每个选中元素的当前偏移
           selected = $(".ui-selected").each(function(i) {
               var el = $(this);
               el.data("offset", el.offset());
               // 存储每个选中元素的原始定位值
               originPositions.push({
                 top: parseInt(el.css('top')) || 0,
                 left: parseInt(el.css('left')) || 0
               })
           });
       } else {
           // 非选中状态下清空现有选择
           selected = $([]);
           $( "#canvas > div" ).removeClass("ui-selected");
       }
       offset = $(this).offset();
       // 多元素拖拽逻辑结束

    },
    drag:function(e,ui){
      // 修复缩放适配问题
      ui.position.left = ui.position.left/currentScale;
      ui.position.top = ui.position.top/currentScale;

      // 多元素拖拽同步位置逻辑开始
      var dt = ui.position.top - offset.top/currentScale, dl = ui.position.left - offset.left/currentScale;
      selected.not(this).each(function() {
         var $this = $(this);
         var elOffset = $this.data("offset");
         $this.css({top: elOffset.top/currentScale + dt, left: elOffset.left/currentScale + dl});
      });
      // 多元素拖拽同步位置逻辑结束

    },
    stop: function(e,ui){
      $(this).addClass('prevent');
      $(this).css("cursor","");
      // 恢复panzoom功能
      $("#canvas").panzoom("enable");
      
      // 批量复位逻辑：放置无效则所有选中元素回退到原始位置
      if (!dropValid) {
        selected.each(function(i) {
          $(this).css({
            top: originPositions[i].top + 'px',
            left: originPositions[i].left + 'px'
          })
        })
        return;
      }
      
      // 防重叠检测逻辑：判断选中元素是否和其他非选中元素重叠
      let hasOverlap = false;
      const allElements = $(".draggable").not(selected);
      selected.each(function() {
        const rect1 = this.getBoundingClientRect();
        allElements.each(function() {
          const rect2 = this.getBoundingClientRect();
          // 矩形碰撞检测逻辑
          if (!(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)) {
            hasOverlap = true;
            return false;
          }
        })
        if (hasOverlap) return false;
      })
      
      // 存在重叠则整体复位
      if (hasOverlap) {
        selected.each(function(i) {
          $(this).css({
            top: originPositions[i].top + 'px',
            left: originPositions[i].left + 'px'
          })
        })
      }
    }
  })
   $(".tile-overlay").droppable({
     accept: '.draggable',
     // 放置成功标记为有效
     drop: function() {
       dropValid = true;
     }
   });
};

逻辑说明 #

• 所有选中元素的复位逻辑完全同步，不会再出现单个复位其余错位的问题
• 碰撞检测会校验所有选中元素和已有元素的位置，只要存在重叠就整体回退到拖拽前的位置，不会出现元素重叠的情况
• 如果你不需要完全回退，也可以根据业务需求调整重叠后的处理逻辑，比如自动偏移到最近的空白位置

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